Feature: Palette Switcher component added.

Feature: Theme Switcher component added.

example/mobile/global.d.ts

@@ -1,5 +1,6 @@
 import "../../src/types/index";
 import defaultLocaleJSON from "../src/variants/locales/default.json";
+import defaultThemeJSON from "../src/variants/themes/default.json";
 
 declare global {
     namespace NCoreUIKit {
@@ -16,9 +17,15 @@ declare global {
 
         interface Translation extends GeneratedTranslations, GeneratedProjectTranslations {
         }
-        /*
+
         type DefaultPaletteL = typeof defaultThemeJSON.palettes[0];
 
+        type ProjectDataL = DefaultPaletteL["themes"]["dark"]["project"];
+        type DefaultProjectColorsL = ProjectDataL;
+
+        interface ProjectColorPalette extends DefaultProjectColors, DefaultProjectColorsL {
+        }
+
         type SystemDataL = DefaultPaletteL["themes"]["dark"]["system"];
         type DefaultSystemColorsL = SystemDataL;
 
@@ -30,6 +37,5 @@ declare global {
 
         interface ContentColorPalette extends DefaultContentColors, DefaultContentColorsL {
         }
-        */
     }
 }

example/mobile/tsconfig.json

@@ -12,5 +12,5 @@
         "**/*",
         "../src/**/*",
         "../src/**/*.json"
-    ]
+, "../../src/assets/svg/nibgatIcon"    ]
 }

example/src/index.tsx

@@ -1,5 +1,6 @@
 import Navigation from "./navigation";
 import defaultLocaleJSON from "./variants/locales/default.json";
+import defaultThemeJSON from "./variants/themes/default.json";
 import {
     useFonts
 } from "expo-font";
@@ -12,6 +13,7 @@ import {
 const NCoreUIKitBase = setupNCoreUIKit({
     initialSelectedGapPropagation: "spacious",
     projectLocales: defaultLocaleJSON,
+    projectThemes: defaultThemeJSON,
     initialSelectedTheme: "light"
 });
 

example/src/pages/home/index.tsx

@@ -9,10 +9,12 @@ import stylesheet from "./stylesheet";
 import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
+    PaletteSwitcher,
     PageContainer,
     ThemeSwitcher,
     RowCard,
-    Text
+    Text,
+    Avatar
 } from "ncore-ui-kit";
 import {
     useNavigation
@@ -56,7 +58,11 @@ const Home = () => {
             }
         }}
     >
+        <PaletteSwitcher/>
         <ThemeSwitcher/>
+        <Avatar
+            title="MA"
+        />
         <View
             style={{
                 justifyContent: "center",

example/src/variants/themes/default.json

@@ -0,0 +1,677 @@
+{
+    "isNeedAndroidTypographyFixer": true,
+    "shapes": {
+        "radiuses": {
+            "soft": {
+                "form": 8,
+                "surface": 12,
+                "actions": 8,
+                "chip": 8,
+                "full": 9999,
+                "xs": 4,
+                "none": 0,
+                "sm": 8,
+                "md": 12,
+                "lg": 16,
+                "xl": 28
+            },
+            "sharp": {
+                "form": 4,
+                "surface": 8,
+                "actions": 4,
+                "chip": 4,
+                "full": 9999,
+                "xs": 2,
+                "none": 0,
+                "sm": 4,
+                "md": 8,
+                "lg": 12,
+                "xl": 16
+            },
+            "rounded": {
+                "form": 12,
+                "surface": 28,
+                "actions": 9999,
+                "chip": 9999,
+                "full": 9999,
+                "xs": 8,
+                "none": 0,
+                "sm": 12,
+                "md": 16,
+                "lg": 28,
+                "xl": 28
+            }
+        },
+        "inlineSpaces": {
+            "subTitle": 4,
+            "required": 4
+        },
+        "borders": {
+            "subtract": 3,
+            "line": 2
+        },
+        "spaces": {
+            "spacious": {
+                "spacingXs": 4,
+                "spacingSm": 8,
+                "spacingMd": 16,
+                "spacingLg": 24,
+                "spacingXl": 32
+            },
+            "compact": {
+                "spacingXs": 2,
+                "spacingSm": 4,
+                "spacingMd": 12,
+                "spacingLg": 16,
+                "spacingXl": 24
+            }
+        }
+    },
+    "typography": {
+        "spacious": {
+            "displayLargeSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "300",
+                "fontSize": 57,
+                "lineHeight": 64,
+                "letterSpacing": -0.25
+            },
+            "displayMediumSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "300",
+                "fontSize": 45,
+                "lineHeight": 52,
+                "letterSpacing": 0
+            },
+            "displaySmallSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "300",
+                "fontSize": 36,
+                "lineHeight": 44,
+                "letterSpacing": 0
+            },
+            "headlineLargeSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "500",
+                "fontSize": 32,
+                "lineHeight": 40,
+                "letterSpacing": 0
+            },
+            "headlineMediumSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "500",
+                "fontSize": 28,
+                "lineHeight": 36,
+                "letterSpacing": 0
+            },
+            "headlineSmallSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "500",
+                "fontSize": 24,
+                "lineHeight": 32,
+                "letterSpacing": 0
+            },
+            "titleLargeSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "500",
+                "fontSize": 22,
+                "lineHeight": 28,
+                "letterSpacing": 0
+            },
+            "titleMediumSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "500",
+                "fontSize": 16,
+                "lineHeight": 24,
+                "letterSpacing": 0.15
+            },
+            "titleSmallSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "500",
+                "fontSize": 14,
+                "lineHeight": 20,
+                "letterSpacing": 0.1
+            },
+            "bodyLargeSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "400",
+                "fontSize": 16,
+                "lineHeight": 24,
+                "letterSpacing": 0.5
+            },
+            "bodyMediumSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "400",
+                "fontSize": 14,
+                "lineHeight": 20,
+                "letterSpacing": 0.25
+            },
+            "bodySmallSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "400",
+                "fontSize": 12,
+                "lineHeight": 16,
+                "letterSpacing": 0.4
+            },
+            "labelLargeSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "400",
+                "fontSize": 14,
+                "lineHeight": 20,
+                "letterSpacing": 0.1
+            },
+            "labelMediumSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "400",
+                "fontSize": 12,
+                "lineHeight": 16,
+                "letterSpacing": 0.5
+            },
+            "labelSmallSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "400",
+                "fontSize": 11,
+                "lineHeight": 16,
+                "letterSpacing": 0.5
+            }
+        },
+        "compact": {
+            "displayLargeSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "300",
+                "fontSize": 45,
+                "lineHeight": 52,
+                "letterSpacing": 0
+            },
+            "displayMediumSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "300",
+                "fontSize": 36,
+                "lineHeight": 44,
+                "letterSpacing": 0
+            },
+            "displaySmallSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "300",
+                "fontSize": 32,
+                "lineHeight": 40,
+                "letterSpacing": 0
+            },
+            "headlineLargeSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "500",
+                "fontSize": 28,
+                "lineHeight": 36,
+                "letterSpacing": 0
+            },
+            "headlineMediumSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "500",
+                "fontSize": 24,
+                "lineHeight": 32,
+                "letterSpacing": 0
+            },
+            "headlineSmallSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "500",
+                "fontSize": 22,
+                "lineHeight": 28,
+                "letterSpacing": 0
+            },
+            "titleLargeSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "500",
+                "fontSize": 16,
+                "lineHeight": 24,
+                "letterSpacing": 0.15
+            },
+            "titleMediumSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "500",
+                "fontSize": 14,
+                "lineHeight": 20,
+                "letterSpacing": 0.1
+            },
+            "titleSmallSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "500",
+                "fontSize": 12,
+                "lineHeight": 16,
+                "letterSpacing": 0.4
+            },
+            "bodyLargeSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "400",
+                "fontSize": 14,
+                "lineHeight": 20,
+                "letterSpacing": 0.25
+            },
+            "bodyMediumSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "400",
+                "fontSize": 12,
+                "lineHeight": 16,
+                "letterSpacing": 0.4
+            },
+            "bodySmallSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "400",
+                "fontSize": 11,
+                "lineHeight": 16,
+                "letterSpacing": 0.5
+            },
+            "labelLargeSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "400",
+                "fontSize": 12,
+                "lineHeight": 16,
+                "letterSpacing": 0.5
+            },
+            "labelMediumSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "400",
+                "fontSize": 11,
+                "lineHeight": 16,
+                "letterSpacing": 0.5
+            },
+            "labelSmallSize": {
+                "fontFamily": "Geist",
+                "fontWeight": "400",
+                "fontSize": 11,
+                "lineHeight": 16,
+                "letterSpacing": 0.5
+            }
+        }
+    },
+    "palettes": [
+        {
+            "name": "nibgat",
+            "themes": {
+                "dark": {
+                    "system": {
+                        "default": {
+                            "primary": "rgba(64,220,195,1)",
+                            "secondary": "rgba(187,204,196,1)",
+                            "tertiary": "rgba(171,203,228,1)",
+                            "error": "rgba(255,187,177,1)",
+                            "success": "rgba(179,250,188,1)",
+                            "warning": "rgba(255,223,102,1)",
+                            "info": "rgba(167,230,255,1)",
+                            "background": "rgba(25,28,27,1)",
+                            "surface": "rgba(25,28,27,1)"
+                        },
+                        "on": {
+                            "primary": "rgba(0,63,54,1)",
+                            "secondary": "rgba(28,53,47,1)",
+                            "tertiary": "rgba(18,52,72,1)",
+                            "error": "rgba(105,0,5,1)",
+                            "success": "rgba(22,66,33,1)",
+                            "warning": "rgba(97,54,0,1)",
+                            "info": "rgba(0,62,90,1)",
+                            "background": "rgba(224,226,225,1)",
+                            "surface": "rgba(224,226,225,1)"
+                        },
+                        "container": {
+                            "primary": "rgba(0,85,69,1)",
+                            "secondary": "rgba(51,74,68,1)",
+                            "tertiary": "rgba(43,74,95,1)",
+                            "error": "rgba(147,0,8,1)",
+                            "success": "rgba(50,97,58,1)",
+                            "warning": "rgba(136,81,0,1)",
+                            "info": "rgba(0,93,128,1)"
+                        },
+                        "onContainer": {
+                            "primary": "rgba(101,250,222,1)",
+                            "secondary": "rgba(206,232,224,1)",
+                            "tertiary": "rgba(201,236,254,1)",
+                            "error": "rgba(255,187,177,1)",
+                            "success": "rgba(206,255,214,1)",
+                            "warning": "rgba(255,241,200,1)",
+                            "info": "rgba(217,241,255,1)"
+                        },
+                        "variant": {
+                            "surface": "rgba(41,50,48,1)"
+                        },
+                        "onVariant": {
+                            "surface": "rgba(191,201,199,1)"
+                        },
+                        "outline": "rgba(137,147,145,1)",
+                        "shadow": "rgba(0,0,0,1)",
+                        "scrim": "rgba(0,0,0,0.5)",
+                        "onMid": {
+                            "surface": "rgba(255,255,255,0.64)"
+                        },
+                        "onLow": {
+                            "surface": "rgba(255,255,255,0.32)"
+                        },
+                        "state": {
+                            "overlay": {
+                                "hover": {
+                                    "default": "rgba(255,255,255,0.32)",
+                                    "primary": "rgba(64,220,195,0.08)",
+                                    "error": "rgba(255,187,177,0.24)",
+                                    "warning": "rgba(255,223,102,0.24)",
+                                    "success": "rgba(179,250,188,0.24)",
+                                    "neutral": "rgba(196,199,198,0.24)",
+                                    "info": "rgba(167,230,255,0.24)"
+                                },
+                                "focus": {
+                                    "default": "rgba(255,255,255,0.64)",
+                                    "primary": "rgba(0,107,92,0.32)",
+                                    "error": "rgba(255,187,177,0.32)",
+                                    "warning": "rgba(255,223,102,0.32)",
+                                    "success": "rgba(179,250,188,0.32)",
+                                    "neutral": "rgba(196,199,198,0.32)",
+                                    "info": "rgba(167,230,255,0.32)"
+                                },
+                                "pressed": {
+                                    "default": "rgba(255,255,255,0.32)",
+                                    "primary": "rgba(0,107,92,0.32)",
+                                    "error": "rgba(255,187,177,0.32)",
+                                    "warning": "rgba(255,223,102,0.32)",
+                                    "success": "rgba(179,250,188,0.32)",
+                                    "neutral": "rgba(196,199,198,0.32)",
+                                    "info": "rgba(167,230,255,0.32)"
+                                },
+                                "disabled": {
+                                    "primary": "rgba(0,107,92,0.24)",
+                                    "error": "rgba(255,187,177,0.24)",
+                                    "warning": "rgba(255,223,102,0.24)",
+                                    "success": "rgba(179,250,188,0.24)",
+                                    "neutral": "rgba(196,199,198,0.08)",
+                                    "info": "rgba(167,230,255,0.24)"
+                                }
+                            },
+                            "border": {
+                                "disabled": {
+                                    "primary": "rgba(0,107,92,0.64)",
+                                    "error": "rgba(255,187,177,0.32)",
+                                    "warning": "rgba(255,223,102,0.32)",
+                                    "success": "rgba(179,250,188,0.32)",
+                                    "neutral": "rgba(196,199,198,0.32)",
+                                    "info": "rgba(167,230,255,0.32)"
+                                }
+                            },
+                            "content": {
+                                "disabled": {
+                                    "primary": "rgba(0,107,92,0.64)",
+                                    "error": "rgba(255,187,177,0.32)",
+                                    "warning": "rgba(255,223,102,0.32)",
+                                    "success": "rgba(179,250,188,0.32)",
+                                    "neutral": "rgba(196,199,198,0.32)",
+                                    "info": "rgba(167,230,255,0.32)"
+                                },
+                                "mid": {
+                                    "error": "rgba(255,255,255,1)"
+                                }
+                            }
+                        },
+                        "disabled": {
+                            "content": "rgba(255,255,255,0.24)"
+                        },
+                        "low": {
+                            "error": "rgba(255,187,177,0.32)",
+                            "warning": "rgba(255,223,102,0.32)",
+                            "success": "rgba(179,250,188,0.32)",
+                            "info": "rgba(167,230,255,0.32)"
+                        }
+                    },
+                    "content": {
+                        "text": {
+                            "high": "rgba(224,226,225,1)",
+                            "mid": "rgba(255,255,255,0.64)",
+                            "low": "rgba(255,255,255,0.32)",
+                            "disabled": "rgba(255,255,255,0.24)",
+                            "emphasized": "rgba(64,220,195,1)",
+                            "link": "rgba(64,220,195,1)",
+                            "onPrimary": "rgba(0,63,54,1)",
+                            "danger": "rgba(255,187,177,1)",
+                            "success": "rgba(179,250,188,1)",
+                            "warning": "rgba(255,223,102,1)",
+                            "info": "rgba(167,230,255,1)",
+                            "disabledWhite": "rgba(255,255,255,0.32)",
+                            "dangerLow": "rgba(255,187,177,0.32)",
+                            "warningLow": "rgba(255,223,102,0.32)",
+                            "successLow": "rgba(179,250,188,0.32)",
+                            "infoLow": "rgba(167,230,255,0.32)"
+                        },
+                        "icon": {
+                            "default": "rgba(191,201,199,1)",
+                            "emphasized": "rgba(64,220,195,1)",
+                            "disabled": "rgba(255,255,255,0.24)",
+                            "onPrimary": "rgba(0,63,54,1)",
+                            "danger": "rgba(255,187,177,1)",
+                            "success": "rgba(179,250,188,1)",
+                            "warning": "rgba(255,223,102,1)",
+                            "info": "rgba(167,230,255,1)",
+                            "low": "rgba(255,255,255,0.32)",
+                            "mid": "rgba(255,255,255,0.64)",
+                            "high": "rgba(224,226,225,1)",
+                            "disabledWhite": "rgba(255,255,255,0.32)"
+                        },
+                        "container": {
+                            "default": "rgba(25,28,27,1)",
+                            "subtle": "rgba(41,50,48,1)",
+                            "emphasized": "rgba(0,85,69,1)",
+                            "selected": "rgba(0,85,69,1)",
+                            "mid": "rgba(37, 35, 34, 1)",
+                            "inverse": "rgba(0,63,54,1)",
+                            "overlay": "rgba(0,0,0,0.5)",
+                            "danger": "rgba(147,0,8,1)",
+                            "success": "rgba(50,97,58,1)",
+                            "warning": "rgba(136,81,0,1)",
+                            "info": "rgba(0,93,128,1)",
+                            "primary": "rgba(64,220,195,1)"
+                        },
+                        "border": {
+                            "default": "rgba(137,147,145,1)",
+                            "subtle": "rgba(41,50,48,1)",
+                            "emphasized": "rgba(64,220,195,1)",
+                            "danger": "rgba(255,187,177,1)",
+                            "success": "rgba(179,250,188,1)",
+                            "disabled": "rgba(255,255,255,0.24)",
+                            "warning": "rgba(255,223,102,1)",
+                            "info": "rgba(167,230,255,1)"
+                        }
+                    },
+                    "project": {
+                        "moon": "#0F5792",
+                        "sun": "#C09E13"
+                    }
+                },
+                "light": {
+                    "system": {
+                        "default": {
+                            "primary": "rgba(0,107,92,1)",
+                            "secondary": "rgba(74,101,95,1)",
+                            "tertiary": "rgba(67,101,127,1)",
+                            "error": "rgba(186,16,16,1)",
+                            "success": "rgba(74,128,82,1)",
+                            "warning": "rgba(176,108,0,1)",
+                            "info": "rgba(37,123,167,1)",
+                            "background": "rgba(250,252,251,1)",
+                            "surface": "rgba(250,252,251,1)"
+                        },
+                        "on": {
+                            "primary": "rgba(182,254,238,1)",
+                            "secondary": "rgba(255,255,255,1)",
+                            "tertiary": "rgba(255,255,255,1)",
+                            "error": "rgba(255,255,255,1)",
+                            "success": "rgba(255,255,255,1)",
+                            "warning": "rgba(255,255,255,1)",
+                            "info": "rgba(255,255,255,1)",
+                            "background": "rgba(25,28,27,1)",
+                            "surface": "rgba(25,28,27,1)"
+                        },
+                        "container": {
+                            "primary": "rgba(101,250,222,1)",
+                            "secondary": "rgba(206,232,224,1)",
+                            "tertiary": "rgba(201,236,254,1)",
+                            "error": "rgba(255,218,214,1)",
+                            "success": "rgba(206,255,214,1)",
+                            "warning": "rgba(255,241,200,1)",
+                            "info": "rgba(217,241,255,1)"
+                        },
+                        "onContainer": {
+                            "primary": "rgba(0,32,27,1)",
+                            "secondary": "rgba(6,33,27,1)",
+                            "tertiary": "rgba(0,30,47,1)",
+                            "error": "rgba(65,0,2,1)",
+                            "success": "rgba(2,34,10,1)",
+                            "warning": "rgba(60,28,0,1)",
+                            "info": "rgba(0,31,54,1)"
+                        },
+                        "variant": {
+                            "surface": "rgba(233,240,238,1)"
+                        },
+                        "onVariant": {
+                            "surface": "rgba(63,73,71,1)"
+                        },
+                        "outline": "rgba(111,121,119,1)",
+                        "shadow": "rgba(0,0,0,1)",
+                        "scrim": "rgba(0,0,0,0.5)",
+                        "onMid": {
+                            "surface": "rgba(0,0,0,0.64)"
+                        },
+                        "onLow": {
+                            "surface": "rgba(0,0,0,0.32)"
+                        },
+                        "state": {
+                            "overlay": {
+                                "hover": {
+                                    "default": "rgba(0,0,0,0.32)",
+                                    "primary": "rgba(64,220,195,0.24)",
+                                    "error": "rgba(186,16,16,0.24)",
+                                    "warning": "rgba(176,108,0,0.24)",
+                                    "success": "rgba(74,128,82,0.24)",
+                                    "neutral": "rgba(91,95,94,0.24)",
+                                    "info": "rgba(37,123,167,0.24)"
+                                },
+                                "focus": {
+                                    "default": "rgba(0,0,0,0.64)",
+                                    "primary": "rgba(0,107,92,0.32)",
+                                    "error": "rgba(186,16,16,0.32)",
+                                    "warning": "rgba(176,108,0,0.32)",
+                                    "success": "rgba(74,128,82,0.32)",
+                                    "neutral": "rgba(91,95,94,0.32)",
+                                    "info": "rgba(37,123,167,0.32)"
+                                },
+                                "pressed": {
+                                    "default": "rgba(0,0,0,0.32)",
+                                    "primary": "rgba(0,107,92,0.32)",
+                                    "error": "rgba(186,16,16,0.32)",
+                                    "warning": "rgba(176,108,0,0.32)",
+                                    "success": "rgba(74,128,82,0.32)",
+                                    "neutral": "rgba(91,95,94,0.32)",
+                                    "info": "rgba(37,123,167,0.32)"
+                                },
+                                "disabled": {
+                                    "primary": "rgba(0,107,92,0.24)",
+                                    "error": "rgba(186,16,16,0.24)",
+                                    "warning": "rgba(176,108,0,0.24)",
+                                    "success": "rgba(74,128,82,0.24)",
+                                    "neutral": "rgba(91,95,94,0.08)",
+                                    "info": "rgba(37,123,167,0.24)"
+                                }
+                            },
+                            "border": {
+                                "disabled": {
+                                    "primary": "rgba(0,107,92,0.32)",
+                                    "error": "rgba(186,16,16,0.32)",
+                                    "warning": "rgba(176,108,0,0.32)",
+                                    "success": "rgba(74,128,82,0.32)",
+                                    "neutral": "rgba(91,95,94,0.32)",
+                                    "info": "rgba(37,123,167,0.32)"
+                                }
+                            },
+                            "content": {
+                                "disabled": {
+                                    "primary": "rgba(101,250,222,0.32)",
+                                    "error": "rgba(186,16,16,0.32)",
+                                    "warning": "rgba(176,108,0,0.32)",
+                                    "success": "rgba(74,128,82,0.32)",
+                                    "neutral": "rgba(91,95,94,0.32)",
+                                    "info": "rgba(37,123,167,0.32)"
+                                },
+                                "mid": {
+                                    "error": "rgba(255,255,255,1)"
+                                }
+                            }
+                        },
+                        "disabled": {
+                            "content": "rgba(0,0,0,0.24)"
+                        },
+                        "low": {
+                            "error": "rgba(186,16,16,0.32)",
+                            "warning": "rgba(176,108,0,0.32)",
+                            "success": "rgba(74,128,82,0.32)",
+                            "info": "rgba(37,123,167,0.32)"
+                        }
+                    },
+                    "content": {
+                        "text": {
+                            "high": "rgba(25,28,27,1)",
+                            "mid": "rgba(0,0,0,0.64)",
+                            "low": "rgba(0,0,0,0.32)",
+                            "disabled": "rgba(0,0,0,0.24)",
+                            "emphasized": "rgba(0,107,92,1)",
+                            "link": "rgba(0,107,92,1)",
+                            "onPrimary": "rgba(182,254,238,1)",
+                            "danger": "rgba(186,16,16,1)",
+                            "success": "rgba(74,128,82,1)",
+                            "warning": "rgba(176,108,0,1)",
+                            "info": "rgba(37,123,167,1)",
+                            "disabledWhite": "rgba(255,255,255,0.32)",
+                            "dangerLow": "rgba(186,16,16,0.32)",
+                            "warningLow": "rgba(176,108,0,0.32)",
+                            "successLow": "rgba(74,128,82,0.32)",
+                            "infoLow": "rgba(37,123,167,0.32)"
+                        },
+                        "icon": {
+                            "default": "rgba(63,73,71,1)",
+                            "emphasized": "rgba(0,107,92,1)",
+                            "disabled": "rgba(0,0,0,0.24)",
+                            "onPrimary": "rgba(182,254,238,1)",
+                            "danger": "rgba(186,16,16,1)",
+                            "success": "rgba(74,128,82,1)",
+                            "warning": "rgba(176,108,0,1)",
+                            "info": "rgba(37,123,167,1)",
+                            "low": "rgba(0,0,0,0.32)",
+                            "mid": "rgba(0,0,0,0.64)",
+                            "high": "rgba(25,28,27,1)",
+                            "disabledWhite": "rgba(255,255,255,0.32)"
+                        },
+                        "container": {
+                            "default": "rgba(250,252,251,1)",
+                            "subtle": "rgba(233,240,238,1)",
+                            "emphasized": "rgba(101,250,222,1)",
+                            "selected": "rgba(101,250,222,1)",
+                            "inverse": "rgba(182,254,238,1)",
+                            "overlay": "rgba(0,0,0,0.5)",
+                            "mid": "rgba(239, 240, 239, 1)",
+                            "danger": "rgba(255,218,214,1)",
+                            "success": "rgba(206,255,214,1)",
+                            "warning": "rgba(255,241,200,1)",
+                            "info": "rgba(217,241,255,1)",
+                            "primary": "rgba(0,107,92,1)"
+                        },
+                        "border": {
+                            "default": "rgba(111,121,119,1)",
+                            "subtle": "rgba(233,240,238,1)",
+                            "emphasized": "rgba(0,107,92,1)",
+                            "danger": "rgba(186,16,16,1)",
+                            "success": "rgba(74,128,82,1)",
+                            "disabled": "rgba(0,0,0,0.24)",
+                            "warning": "rgba(176,108,0,1)",
+                            "info": "rgba(37,123,167,1)"
+                        }
+                    },
+                    "project": {
+                        "moon": "#54A7EB",
+                        "sun": "#FFCF11"
+                    }
+                }
+            }
+        }
+    ]
+}

example/web/tsconfig.json

@@ -10,7 +10,7 @@
         "**/*.json",
         "**/*.tsx",
         "**/*.ts"
-    ],
+, "../../src/assets/svg/nibgatIcon"    ],
     "exclude": [
         "**/node_modules",
         "**/Pods"

src/assets/svg/badgeAlertIcon/index.tsx

@@ -1,42 +0,0 @@
-import {
-    NCoreUIKitTheme
-} from "../../../core/hooks";
-import {
-    type INCoreUIKitIconProps
-} from "../../../types";
-import {
-    Path,
-    Svg
-} from "react-native-svg";
-
-const SvgBadgeAlertIcon = ({
-    color = "default",
-    customColor,
-    size = 20,
-    ...props
-}: INCoreUIKitIconProps) => {
-    const {
-        colors
-    } = NCoreUIKitTheme.useContext();
-
-    const pathScale = 20 / size;
-
-    const finalColor = customColor ? customColor : colors.content.icon[color];
-
-    return <Svg
-        height={size}
-        width={size}
-        fill="none"
-        {...props}
-    >
-        <Path
-            d="M10 6.667V10m0 3.333h.008m-6.8-6.15a3.333 3.333 0 0 1 3.984-3.975 3.333 3.333 0 0 1 5.616 0 3.333 3.333 0 0 1 3.984 3.984 3.333 3.333 0 0 1 0 5.616 3.333 3.333 0 0 1-3.975 3.984 3.333 3.333 0 0 1-5.625 0 3.333 3.333 0 0 1-3.984-3.975 3.335 3.335 0 0 1 0-5.634Z"
-            transform={`scale(${1 / pathScale})`}
-            strokeLinejoin="round"
-            strokeLinecap="round"
-            strokeWidth={1.167}
-            stroke={finalColor}
-        />
-    </Svg>;
-};
-export default SvgBadgeAlertIcon;

src/assets/svg/badgeDangerIcon/index.tsx

@@ -1,40 +0,0 @@
-import {
-    NCoreUIKitTheme
-} from "../../../core/hooks";
-import {
-    type INCoreUIKitIconProps
-} from "../../../types";
-import {
-    Path,
-    Svg
-} from "react-native-svg";
-
-const SvgBadgeDangerIcon = ({
-    color = "default",
-    customColor,
-    size = 20,
-    ...props
-}: INCoreUIKitIconProps) => {
-    const {
-        colors
-    } = NCoreUIKitTheme.useContext();
-
-    const pathScale = 20 / size;
-
-    return <Svg
-        height={size}
-        width={size}
-        fill="none"
-        {...props}
-    >
-        <Path
-            d="m12.5 7.5-5 5m0-5 5 5M3.208 7.183a3.333 3.333 0 0 1 3.984-3.975 3.333 3.333 0 0 1 5.616 0 3.333 3.333 0 0 1 3.984 3.984 3.333 3.333 0 0 1 0 5.616 3.333 3.333 0 0 1-3.975 3.984 3.333 3.333 0 0 1-5.625 0 3.333 3.333 0 0 1-3.984-3.975 3.335 3.335 0 0 1 0-5.634Z"
-            stroke={customColor ? customColor : colors.content.icon[color]}
-            transform={`scale(${1 / pathScale})`}
-            strokeLinejoin="round"
-            strokeLinecap="round"
-            strokeWidth={1.167}
-        />
-    </Svg>;
-};
-export default SvgBadgeDangerIcon;

src/assets/svg/badgeInfoIcon/index.tsx

@@ -1,40 +0,0 @@
-import {
-    NCoreUIKitTheme
-} from "../../../core/hooks";
-import {
-    type INCoreUIKitIconProps
-} from "../../../types";
-import {
-    Path,
-    Svg
-} from "react-native-svg";
-
-const SvgBadgeInfoIcon = ({
-    color = "default",
-    customColor,
-    size = 20,
-    ...props
-}: INCoreUIKitIconProps) => {
-    const {
-        colors
-    } = NCoreUIKitTheme.useContext();
-
-    const pathScale = 20 / size;
-
-    return <Svg
-        height={size}
-        width={size}
-        fill="none"
-        {...props}
-    >
-        <Path
-            d="M10 13.333V10m0-3.333h.008m-6.8.516a3.333 3.333 0 0 1 3.984-3.975 3.333 3.333 0 0 1 5.616 0 3.333 3.333 0 0 1 3.984 3.984 3.333 3.333 0 0 1 0 5.616 3.333 3.333 0 0 1-3.975 3.984 3.333 3.333 0 0 1-5.625 0 3.333 3.333 0 0 1-3.984-3.975 3.335 3.335 0 0 1 0-5.634Z"
-            stroke={customColor ? customColor : colors.content.icon[color]}
-            transform={`scale(${1 / pathScale})`}
-            strokeLinejoin="round"
-            strokeLinecap="round"
-            strokeWidth={1.167}
-        />
-    </Svg>;
-};
-export default SvgBadgeInfoIcon;

src/assets/svg/badgeQuestionMarkIcon/index.tsx

@@ -1,50 +0,0 @@
-import {
-    NCoreUIKitTheme
-} from "../../../core/hooks";
-import {
-    type INCoreUIKitIconProps
-} from "../../../types";
-import {
-    Path,
-    Svg
-} from "react-native-svg";
-
-const SvgBadgeQuestionMarkIcon = ({
-    color = "default",
-    customColor,
-    size = 20,
-    ...props
-}: INCoreUIKitIconProps) => {
-    const {
-        colors
-    } = NCoreUIKitTheme.useContext();
-
-    const pathScale = 20 / size;
-
-    const finalColor = customColor ? customColor : colors.content.icon[color];
-
-    return <Svg
-        height={size}
-        width={size}
-        fill="none"
-        {...props}
-    >
-        <Path
-            d="m12.5 7.5-5 5m0-5 5 5M3.208 7.183a3.333 3.333 0 0 1 3.984-3.975 3.333 3.333 0 0 1 5.616 0 3.333 3.333 0 0 1 3.984 3.984 3.333 3.333 0 0 1 0 5.616 3.333 3.333 0 0 1-3.975 3.984 3.333 3.333 0 0 1-5.625 0 3.333 3.333 0 0 1-3.984-3.975 3.335 3.335 0 0 1 0-5.634Z"
-            transform={`scale(${1 / pathScale})`}
-            strokeLinejoin="round"
-            strokeLinecap="round"
-            strokeWidth={1.167}
-            stroke={finalColor}
-        />
-        <Path
-            d="M7.575 7.5a2.5 2.5 0 0 1 4.858.833c0 1.667-2.5 2.5-2.5 2.5M10 14.167h.008"
-            transform={`scale(${1 / pathScale})`}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            stroke={finalColor}
-            strokeWidth={1.167}
-        />
-    </Svg>;
-};
-export default SvgBadgeQuestionMarkIcon;

src/assets/svg/badgeRightIcon/index.tsx

@@ -1,40 +0,0 @@
-import {
-    NCoreUIKitTheme
-} from "../../../core/hooks";
-import {
-    type INCoreUIKitIconProps
-} from "../../../types";
-import {
-    Path,
-    Svg
-} from "react-native-svg";
-
-const SvgChevronRight = ({
-    color = "default",
-    customColor,
-    size = 30,
-    ...props
-}: INCoreUIKitIconProps) => {
-    const {
-        colors
-    } = NCoreUIKitTheme.useContext();
-
-    const pathScale = 26 / size;
-
-    return <Svg
-        height={size}
-        width={size}
-        fill="none"
-        {...props}
-    >
-        <Path
-            stroke={customColor ? customColor : colors.content.icon[color]}
-            transform={`scale(${1 / pathScale})`}
-            d="m7.5 24 11-11-11-11"
-            strokeLinejoin="round"
-            strokeLinecap="round"
-            strokeWidth={1.55}
-        />
-    </Svg>;
-};
-export default SvgChevronRight;

src/assets/svg/badgeSuccessIcon/index.tsx

@@ -1,50 +0,0 @@
-import {
-    NCoreUIKitTheme
-} from "../../../core/hooks";
-import {
-    type INCoreUIKitIconProps
-} from "../../../types";
-import {
-    Path,
-    Svg
-} from "react-native-svg";
-
-const SvgBadgeSuccessIcon = ({
-    color = "default",
-    customColor,
-    size = 20,
-    ...props
-}: INCoreUIKitIconProps) => {
-    const {
-        colors
-    } = NCoreUIKitTheme.useContext();
-
-    const pathScale = 20 / size;
-
-    const finalColor = customColor ? customColor : colors.content.icon[color];
-
-    return <Svg
-        height={size}
-        width={size}
-        fill="none"
-        {...props}
-    >
-        <Path
-            d="m12.5 7.5-5 5m0-5 5 5M3.208 7.183a3.333 3.333 0 0 1 3.984-3.975 3.333 3.333 0 0 1 5.616 0 3.333 3.333 0 0 1 3.984 3.984 3.333 3.333 0 0 1 0 5.616 3.333 3.333 0 0 1-3.975 3.984 3.333 3.333 0 0 1-5.625 0 3.333 3.333 0 0 1-3.984-3.975 3.335 3.335 0 0 1 0-5.634Z"
-            transform={`scale(${1 / pathScale})`}
-            strokeLinejoin="round"
-            strokeLinecap="round"
-            strokeWidth={1.167}
-            stroke={finalColor}
-        />
-        <Path
-            transform={`scale(${1 / pathScale})`}
-            d="m7.5 10 1.667 1.667L12.5 8.333"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={1.167}
-            stroke={finalColor}
-        />
-    </Svg>;
-};
-export default SvgBadgeSuccessIcon;

src/assets/svg/chevronRightIcon/index.tsx

@@ -1,40 +0,0 @@
-import {
-    NCoreUIKitTheme
-} from "../../../core/hooks";
-import {
-    type INCoreUIKitIconProps
-} from "../../../types";
-import {
-    Path,
-    Svg
-} from "react-native-svg";
-
-const SvgChevronRight = ({
-    color = "default",
-    customColor,
-    size = 30,
-    ...props
-}: INCoreUIKitIconProps) => {
-    const {
-        colors
-    } = NCoreUIKitTheme.useContext();
-
-    const pathScale = 26 / size;
-
-    return <Svg
-        height={size}
-        width={size}
-        fill="none"
-        {...props}
-    >
-        <Path
-            stroke={customColor ? customColor : colors.content.icon[color]}
-            transform={`scale(${1 / pathScale})`}
-            d="m7.5 24 11-11-11-11"
-            strokeLinejoin="round"
-            strokeLinecap="round"
-            strokeWidth={1.55}
-        />
-    </Svg>;
-};
-export default SvgChevronRight;

src/assets/svg/cleanIcon/index.tsx

@@ -1,40 +0,0 @@
-import {
-    NCoreUIKitTheme
-} from "../../../core/hooks";
-import {
-    type INCoreUIKitIconProps
-} from "../../../types";
-import {
-    Path,
-    Svg
-} from "react-native-svg";
-
-const SvgCleanIcon = ({
-    color = "default",
-    customColor,
-    size = 20,
-    ...props
-}: INCoreUIKitIconProps) => {
-    const {
-        colors
-    } = NCoreUIKitTheme.useContext();
-
-    const pathScale = 27 / size;
-
-    return <Svg
-        height={size}
-        width={size}
-        fill="none"
-        {...props}
-    >
-        <Path
-            d="M13.5 25C19.851 25 25 19.851 25 13.5S19.851 2 13.5 2 2 7.149 2 13.5 7.149 25 13.5 25ZM16.95 10.05l-6.9 6.9m0-6.9 6.9 6.9"
-            stroke={customColor ? customColor : colors.content.icon[color]}
-            transform={`scale(${1 / pathScale})`}
-            strokeLinejoin="round"
-            strokeLinecap="round"
-            strokeWidth={1.25}
-        />
-    </Svg>;
-};
-export default SvgCleanIcon;

src/assets/svg/eyeClosedIcon/index.tsx

@@ -1,50 +0,0 @@
-import {
-    NCoreUIKitTheme
-} from "../../../core/hooks";
-import {
-    type INCoreUIKitIconProps
-} from "../../../types";
-import {
-    Path,
-    Svg
-} from "react-native-svg";
-
-const SvgEyeClosed = ({
-    color = "default",
-    customColor,
-    size = 30,
-    ...props
-}: INCoreUIKitIconProps) => {
-    const {
-        colors
-    } = NCoreUIKitTheme.useContext();
-
-    const pathScale = 20 / size;
-
-    const finalColor = customColor ? customColor : colors.content.icon[color];
-
-    return <Svg
-        height={size}
-        width={size}
-        fill="none"
-        {...props}
-    >
-        <Path
-            d="M8.958 4.233a8.954 8.954 0 0 1 9.338 5.48c.069.187.069.392 0 .58a9.002 9.002 0 0 1-1.204 2.075m-5.341-.566a2.5 2.5 0 0 1-3.536-3.535"
-            transform={`scale(${1 / pathScale})`}
-            strokeLinejoin="round"
-            strokeLinecap="round"
-            strokeWidth={1.167}
-            stroke={finalColor}
-        />
-        <Path
-            d="M14.58 14.586a8.957 8.957 0 0 1-12.848-4.293.833.833 0 0 1 0-.58 8.958 8.958 0 0 1 3.705-4.285M1.68 1.67l16.667 16.667"
-            transform={`scale(${1 / pathScale})`}
-            strokeLinejoin="round"
-            strokeLinecap="round"
-            strokeWidth={1.167}
-            stroke={finalColor}
-        />
-    </Svg>;
-};
-export default SvgEyeClosed;

src/assets/svg/eyeOpenedIcon/index.tsx

@@ -1,50 +0,0 @@
-import {
-    NCoreUIKitTheme
-} from "../../../core/hooks";
-import {
-    type INCoreUIKitIconProps
-} from "../../../types";
-import {
-    Path,
-    Svg
-} from "react-native-svg";
-
-const SvgEyeOpened = ({
-    color = "default",
-    customColor,
-    size = 30,
-    ...props
-}: INCoreUIKitIconProps) => {
-    const {
-        colors
-    } = NCoreUIKitTheme.useContext();
-
-    const pathScale = 20 / size;
-
-    const finalColor = customColor ? customColor : colors.content.icon[color];
-
-    return <Svg
-        height={size}
-        width={size}
-        fill="none"
-        {...props}
-    >
-        <Path
-            d="M1.732 10.293a.833.833 0 0 1 0-.58 8.958 8.958 0 0 1 16.563 0c.07.187.07.393 0 .58a8.958 8.958 0 0 1-16.563 0Z"
-            transform={`scale(${1 / pathScale})`}
-            strokeLinejoin="round"
-            strokeLinecap="round"
-            stroke={finalColor}
-            strokeWidth={1.167}
-        />
-        <Path
-            d="M10.014 12.503a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"
-            transform={`scale(${1 / pathScale})`}
-            strokeLinejoin="round"
-            strokeLinecap="round"
-            stroke={finalColor}
-            strokeWidth={1.167}
-        />
-    </Svg>;
-};
-export default SvgEyeOpened;

src/assets/svg/index.ts

@@ -3,37 +3,13 @@ export {
 } from "./loadingIcon";
 
 export {
-    default as CleanIcon
-} from "./cleanIcon";
+    default as NIBGATIcon
+} from "./nibgatIcon";
 
 export {
-    default as ChevronRightIcon
-} from "./chevronRightIcon";
+    default as NIBGATCommunityIcon
+} from "./nibgatCommunityIcon";
 
 export {
-    default as EyeClosedIcon
-} from "./eyeClosedIcon";
-
-export {
-    default as EyeOpenedIcon
-} from "./eyeOpenedIcon";
-
-export {
-    default as BadgeInfoIcon
-} from "./badgeInfoIcon";
-
-export {
-    default as BadgeDangerIcon
-} from "./badgeDangerIcon";
-
-export {
-    default as BadgeSuccessIcon
-} from "./badgeSuccessIcon";
-
-export {
-    default as BadgeQuestionMarkIcon
-} from "./badgeQuestionMarkIcon";
-
-export {
-    default as BadgeAlertIcon
-} from "./badgeAlertIcon";
+    default as CayCoreIcon
+} from "./cayCoreIcon";

src/assets/svg/nibgatCommunityIcon/index.tsx

@@ -0,0 +1,60 @@
+import {
+    NCoreUIKitTheme
+} from "../../../core/hooks";
+import type {
+    INCoreUIKitIconProps
+} from "../../../types";
+import Svg, {
+    Path,
+    Defs,
+    G
+} from "react-native-svg";
+
+const NIBGATCommunityIcon = ({
+    customColor = "#00c2a9",
+    size = 30,
+    color,
+    style,
+    ...props
+}: INCoreUIKitIconProps) => {
+    const {
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const pathScale = 3543 / size;
+
+    const strokeWidth = (size * 2.362) / 3543;
+
+    return <Svg
+        fillRule="evenodd"
+        clipRule="evenodd"
+        height={size}
+        width={size}
+        style={{
+            ...style
+        }}
+        {...props}
+    >
+        <Defs></Defs>
+        <G id="Layer_x0020_1">
+            <Path
+                d="m1263 780 127-220 127-221h509l127 221 127 220-127 220-127 221h-509l-127-221zM2121 1276l128-221 127-220h509l127 220 127 221-127 220-127 220h-509l-127-220zM2121 2267l128-220 127-220h509l127 220 127 220-127 221-127 220h-509l-127-220zM1263 2763l127-220 127-221h509l127 221 127 220-127 220-127 221h-509l-127-221zM404 2267l127-220 127-220h509l127 220 128 220-128 221-127 220H658l-127-220zM404 1276l127-221 127-220h509l127 220 128 221-128 220-127 220H658l-127-220z"
+                transform={[{
+                    scale: 1 / pathScale
+                }]}
+            />
+            <Path
+                d="m1263 1772 127-221 127-220h509l127 220 127 221-127 220-127 220h-509l-127-220-127-220zm599-215h0c9-5 21-2 26 6l114 199c2 3 3 6 3 10 0 3-1 6-3 9l-113 197c-2 4-5 7-9 9h0c-9 4-20 1-25-8l-185-368-92 161 109 189c5 9 2 20-6 25h0c-9 5-21 2-26-6l-114-199c-2-3-3-6-3-10 0-3 1-6 3-9l113-197c2-4 5-7 9-9h0c9-4 20-1 25 8l185 368 92-160-109-190c-5-9-2-20 6-25z"
+                stroke={color ? colors.content.icon[color] : customColor}
+                fill={color ? colors.content.icon[color] : customColor}
+                strokeWidth={strokeWidth}
+                strokeLinejoin="round"
+                strokeLinecap="round"
+                transform={[{
+                    scale: 1 / pathScale
+                }]}
+            />
+        </G>
+    </Svg>;
+};
+export default NIBGATCommunityIcon;

src/assets/svg/nibgatIcon/index.tsx

@@ -0,0 +1,96 @@
+import type {
+    INCoreUIKitIconProps
+} from "../../../types";
+import Svg, {
+    LinearGradient,
+    Path,
+    Defs,
+    Stop
+} from "react-native-svg";
+
+const NIBGATIcon = ({
+    size = 30,
+    style,
+    ...props
+}: INCoreUIKitIconProps) => {
+    const pathScale = 620 / size;
+
+    return <Svg
+        height={size}
+        width={size}
+        fill="none"
+        {...props}
+        style={{
+            ...style
+        }}
+    >
+        <Path
+            d="m171.363 110.098 138.558-80.013 138.557 80.013v159.987l138.18 79.635v159.987L448.1 589.72l-137.801-80.013-138.558 80.013-138.557-80.013V349.72l138.179-79.635V110.098Z"
+            transform={[{
+                scale: 1 / pathScale
+            }]}
+            fillOpacity={0.922}
+            clipRule="evenodd"
+            fillRule="evenodd"
+            fill="url(#a)"
+        />
+        <Path
+            d="m222.613 198.652 21.808-37.795 21.846-37.834h87.307l21.846 37.834 21.807 37.795-21.807 37.833-21.846 37.795h-87.307l-21.846-37.795-21.808-37.833ZM353.574 425.537l21.846-37.834 21.808-37.795h87.345l21.808 37.795 21.845 37.834-21.845 37.795-21.808 37.833h-87.345l-21.808-37.833-21.846-37.795ZM91.615 425.537l21.846-37.834 21.808-37.795h87.345l21.808 37.795 21.845 37.834-21.845 37.795-21.808 37.833h-87.345l-21.808-37.833-21.846-37.795Z"
+            transform={[{
+                scale: 1 / pathScale
+            }]}
+            strokeOpacity={0.69}
+            strokeWidth={6.65}
+            clipRule="evenodd"
+            stroke="#323232"
+        />
+        <Path
+            d="m353.574 123.024 25.625-52.914M397.229 198.652h51.25M266.267 123.023l-29.329-50.796M222.614 198.652h-51.251M484.572 349.908l25.512-44.296M528.227 425.537h58.431M484.572 501.165l29.216 50.646M397.227 501.165l-25.625 44.145M222.613 501.165l25.625 44.372M135.268 501.165l-29.215 50.646M91.615 425.537H33.184M135.268 349.908l-25.512-44.296"
+            transform={[{
+                scale: 1 / pathScale
+            }]}
+            strokeOpacity={0.69}
+            strokeWidth={5.669}
+            stroke="#323232"
+        />
+        <Path
+            d="m222.613 349.909 21.808-37.796 21.846-37.833h87.307l21.846 37.833 21.807 37.796-21.807 37.795-21.846 37.833h-87.307l-21.846-37.833-21.808-37.795Z"
+            transform={[{
+                scale: 1 / pathScale
+            }]}
+            strokeWidth={6.65}
+            clipRule="evenodd"
+            fillRule="evenodd"
+            stroke="#323232"
+            fill="#323232"
+        />
+        <Path
+            d="m284.031 298.394-29.707 51.515 29.707 51.514M335.811 298.394l29.707 51.515-29.707 51.514M284.031 298.394l51.78 103.029"
+            transform={[{
+                scale: 1 / pathScale
+            }]}
+            strokeLinejoin="round"
+            strokeOpacity={0.941}
+            strokeLinecap="round"
+            strokeWidth={9.449}
+            stroke="#FBFBFB"
+        />
+        <Defs>
+            <LinearGradient
+                gradientUnits="userSpaceOnUse"
+                x1={484.077 / pathScale}
+                x2={135.764 / pathScale}
+                y2={531.137 / pathScale}
+                y1={88.682 / pathScale}
+                id="a"
+            >
+                <Stop stopColor="#36B49E" />
+                <Stop
+                    stopColor="#068F7C"
+                    offset={1}
+                />
+            </LinearGradient>
+        </Defs>
+    </Svg>;
+};
+export default NIBGATIcon;

src/components/avatar/index.tsx

@@ -0,0 +1,123 @@
+import {
+    TouchableOpacity,
+    Image
+} from "react-native";
+import type IAvatarProps from "./type";
+import stylesheet, {
+    getAvatarSize,
+    useStyles
+} from "./stylesheet";
+import {
+    NCoreUIKitTheme
+} from "../../core/hooks";
+import {
+    UserRound as UserRoundIcon
+} from "lucide-react-native";
+import Text from "../text";
+
+const Avatar = ({
+    backgroundColor = "primary",
+    borderColor = "emphasized",
+    titleColor = "onPrimary",
+    statusIndicatorType,
+    isStatusIndicator,
+    isWorkWithAction,
+    image: ImageProp,
+    size = "medium",
+    icon: IconProp,
+    customTheme,
+    isDisabled,
+    imageProps,
+    isLoading,
+    iconColor,
+    imageUrl,
+    onPress,
+    title,
+    style
+}: IAvatarProps) => {
+    const {
+        radiuses,
+        colors,
+        spaces
+    } = NCoreUIKitTheme.useContext(customTheme);
+
+    const currentSize = getAvatarSize({
+        spaces,
+        size
+    });
+
+    const {
+        container: containerDynamicStyle
+    } = useStyles({
+        backgroundColor,
+        borderColor,
+        currentSize,
+        iconColor,
+        radiuses,
+        colors,
+        spaces
+    });
+
+    const calculateShortTitle = () => {
+        return title;
+    };
+
+    const renderIcon = () => {
+        if(IconProp) {
+            return <IconProp
+                size={currentSize.iconSize}
+                customColor={iconColor}
+                color="danger"
+            />;
+        }
+
+        return <UserRoundIcon
+            size={currentSize.iconSize}
+            color={iconColor}
+        />;
+    };
+
+    const renderContent = () => {
+        if(IconProp) {
+            return renderIcon();
+        }
+
+        if(!title && !ImageProp && !imageUrl) {
+            return renderIcon();
+        }
+
+        if(ImageProp) {
+            const TargetImage = ImageProp();
+
+            return <TargetImage/>;
+        }
+
+        if(imageUrl) {
+            return <Image
+                {...imageProps}
+            />;
+        }
+
+        return <Text
+            variant={currentSize.fontSize}
+            color={titleColor}
+        >
+            {calculateShortTitle()}
+        </Text>;
+    };
+
+    return <TouchableOpacity
+        disabled={!isWorkWithAction || isDisabled || isLoading}
+        onPress={!isWorkWithAction || isDisabled || isLoading ? undefined : () => {
+            if(onPress) onPress();
+        }}
+        style={[
+            style,
+            stylesheet.container,
+            containerDynamicStyle
+        ]}
+    >
+        {renderContent()}
+    </TouchableOpacity>;
+};
+export default Avatar;

src/components/avatar/stylesheet.ts

@@ -0,0 +1,95 @@
+import {
+    type ViewStyle,
+    StyleSheet
+} from "react-native";
+import type {
+    AvatarSizeConstantType,
+    AvatarDynamicStyleType,
+    AvatarMeasuresKeys,
+    AvatarSizeType,
+    AvatarMeasures
+} from "./type";
+import type {
+    Mutable
+} from "../../types";
+
+export const AVATAR_SIZES: Record<AvatarSizeType, AvatarMeasuresKeys> = {
+    xSmall: {
+        paddingHorizontal: "spacingXs",
+        paddingVertical: "spacingXs",
+        fontSize: "labelSmallSize",
+        iconSize: 14
+    },
+    small: {
+        paddingHorizontal: "spacingSm",
+        paddingVertical: "spacingSm",
+        fontSize: "labelMediumSize",
+        iconSize: 18
+    },
+    medium: {
+        paddingHorizontal: "spacingMd",
+        paddingVertical: "spacingMd",
+        fontSize: "labelLargeSize",
+        iconSize: 22
+    },
+    large: {
+        paddingHorizontal: "spacingLg",
+        paddingVertical: "spacingLg",
+        fontSize: "bodyLargeSize",
+        iconSize: 26
+    },
+    xLarge: {
+        paddingHorizontal: "spacingXl",
+        fontSize: "headlineSmallSize",
+        paddingVertical: "spacingXl",
+        iconSize: 32
+    }
+};
+
+export const getAvatarSize = ({
+    spaces,
+    size
+}: AvatarSizeConstantType): AvatarMeasures => {
+    const currentSize = AVATAR_SIZES[size];
+
+    return {
+        paddingHorizontal: spaces[currentSize.paddingHorizontal],
+        paddingVertical: spaces[currentSize.paddingVertical],
+        fontSize: currentSize.fontSize,
+        iconSize: currentSize.iconSize
+    };
+};
+
+const stylesheet = StyleSheet.create({
+    container: {
+        overflow: "hidden"
+    }
+});
+
+export const useStyles = ({
+    backgroundColor,
+    borderColor,
+    currentSize,
+    iconColor,
+    radiuses,
+    imageUrl,
+    colors,
+    spaces,
+    image,
+    title
+}: AvatarDynamicStyleType) => {
+    const styles = {
+        container: {
+            backgroundColor: backgroundColor === "transparent" ? "transparent" : colors.content.container[backgroundColor],
+            borderRadius: radiuses.full,
+            padding: spaces.spacingMd
+        } as Mutable<ViewStyle>
+    };
+
+    if(!title && !image && !imageUrl && !backgroundColor) {
+        styles.container.backgroundColor = colors.content.container.subtle;
+    }
+
+    return styles;
+};
+export default stylesheet;

src/components/avatar/type.ts

@@ -0,0 +1,74 @@
+import {
+    type ImageProps,
+    type TextStyle,
+    type StyleProp,
+    Image
+} from "react-native";
+import type {
+    NCoreUIKitIcon
+} from "../../types";
+
+export type AvatarDynamicStyleType = {
+    backgroundColor: keyof NCoreUIKit.ContainerContentColors | "transparent";
+    borderColor: keyof NCoreUIKit.BorderContentColors | "transparent";
+    iconColor: keyof NCoreUIKit.ProjectColorPalette;
+    radiuses: NCoreUIKit.ActivePalette["radiuses"];
+    spaces: NCoreUIKit.ActivePalette["spaces"];
+    colors: NCoreUIKit.ActivePalette["colors"];
+    currentSize: AvatarMeasures;
+    image?: () => typeof Image;
+    imageUrl?: string;
+    title?: string;
+};
+
+export type AvatarMeasuresKeys = {
+    paddingHorizontal: keyof NCoreUIKit.Spaces;
+    paddingVertical: keyof NCoreUIKit.Spaces;
+    fontSize: keyof NCoreUIKit.Typography;
+    iconSize: number;
+};
+
+export type AvatarMeasures = {
+    fontSize: keyof NCoreUIKit.Typography;
+    paddingHorizontal: number;
+    paddingVertical: number;
+    iconSize: number;
+};
+
+export type AvatarSizeConstantType = {
+    spaces: NCoreUIKit.ActivePalette["spaces"];
+    size: AvatarSizeType;
+};
+
+export type AvatarStatusIndıcatorType = keyof NCoreUIKit.ContainerContentColors;
+
+export type AvatarSizeType = "xSmall" | "small" | "medium" | "large" | "xLarge";
+
+interface IAvatarProps {
+    backgroundColor?: keyof NCoreUIKit.ContainerContentColors | "transparent";
+    borderColor?: keyof NCoreUIKit.BorderContentColors | "transparent";
+    iconColor?: keyof NCoreUIKit.ProjectColorPalette;
+    customTheme?: {
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
+    };
+    style?: StyleProp<TextStyle>[] | StyleProp<TextStyle>;
+    statusIndicatorType?: AvatarStatusIndıcatorType;
+    titleColor?: keyof NCoreUIKit.TextContentColors;
+    isStatusIndicator?: boolean;
+    isWorkWithAction?: boolean;
+    image?: () => typeof Image;
+    imageProps?: ImageProps;
+    icon?: NCoreUIKitIcon;
+    size?: AvatarSizeType;
+    isDisabled?: boolean;
+    onPress?: () => void;
+    isLoading?: boolean;
+    imageUrl?: string;
+    title?: string;
+}
+export type {
+    IAvatarProps as default
+};

src/components/button/index.tsx

@@ -96,7 +96,7 @@ const Button: FC<IButtonProps> = ({
     });
 
     const titleProps: ITextProps = {
-        color: currentType.titleColor,
+        color: currentType.titleColor
     };
 
     const iconProps: NCoreUIKit.IconCallbackProps = {
@@ -132,11 +132,13 @@ const Button: FC<IButtonProps> = ({
     const renderIcon = () => {
         if(!isDisabled && !isLoading) {
             if(customTextColor) {
-                iconProps.customColor = customTextColor;
+                const _customTextColor = customTextColor as keyof NCoreUIKit.ProjectColorPalette;
+                iconProps.customColor = colors.project[_customTextColor] ? colors.project[_customTextColor] : customTextColor;
             }
 
             if(customIconColor) {
-                iconProps.customColor = customIconColor;
+                const _customIconColor = customIconColor as keyof NCoreUIKit.ProjectColorPalette;
+                iconProps.customColor = colors.project[_customIconColor] ? colors.project[_customIconColor] : customIconColor;
             }
         }
 

src/components/button/stylesheet.ts

@@ -292,11 +292,17 @@ export const useStyles = ({
     }
 
     if(customColor) {
-        styles.container.backgroundColor = customColor;
+        const _customContainerColor = customColor as keyof NCoreUIKit.ContainerContentColors;
+        const _customColor = customColor as keyof NCoreUIKit.ProjectColorPalette;
+
+        styles.container.backgroundColor = colors.project[_customColor] ? colors.project[_customColor] : colors.content.container[_customContainerColor] ? colors.content.container[_customContainerColor] : customColor;
     }
 
     if(customBorderColor) {
-        styles.container.borderColor = customBorderColor;
+        const _customContentBorderColor = customBorderColor as keyof NCoreUIKit.BorderContentColors;
+        const _customBorderColor = customBorderColor as keyof NCoreUIKit.ProjectColorPalette;
+
+        styles.container.borderColor = colors.project[_customBorderColor] ? colors.project[_customBorderColor] : colors.content.border[_customContentBorderColor] ? colors.content.border[_customContentBorderColor] : customBorderColor;
     }
 
     return styles;

src/components/button/type.ts

@@ -12,6 +12,8 @@ import {
 } from "../../types";
 
 export type ButtonDynamicStyleType = {
+    customBorderColor?: keyof NCoreUIKit.ProjectColorPalette | (string & {});
+    customColor?: keyof NCoreUIKit.ProjectColorPalette | (string & {});
     displayBehaviourWhileLoading?: ButtonDisplayBehaviourWhileLoading;
     radiuses: NCoreUIKit.ActivePalette["radiuses"];
     spaces: NCoreUIKit.ActivePalette["spaces"];
@@ -21,13 +23,11 @@ export type ButtonDynamicStyleType = {
     currentVariant: ButtonVariants;
     borders: NCoreUIKit.Borders;
     currentSize: ButtonMeasures;
-    customBorderColor?: string;
     isCustomPadding?: boolean;
     currentType: ButtonTypes;
     variant: ButtonVariant;
     icon?: NCoreUIKitIcon;
     isDisabled?: boolean;
-    customColor?: string;
     isLoading?: boolean;
     type: ButtonType;
     title?: string;
@@ -83,25 +83,25 @@ export type ButtonVariant = "filled" | "outline" | "ghost";
 export type ButtonSize = "small" | "medium" | "large";
 
 interface IButtonProps extends Omit<ButtonProps, "title" | "disabled"> {
+    customBorderColor?: keyof NCoreUIKit.ProjectColorPalette | (string & {});
+    customIconColor?: keyof NCoreUIKit.ProjectColorPalette | (string & {});
+    customTextColor?: keyof NCoreUIKit.ProjectColorPalette | (string & {});
+    customColor?: keyof NCoreUIKit.ProjectColorPalette | (string & {});
     displayBehaviourWhileLoading?: ButtonDisplayBehaviourWhileLoading;
     titleStyle?: StyleProp<TextStyle>[] | StyleProp<TextStyle>;
-    style?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
     customTheme?: {
         gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
         sharpness?: keyof NCoreUIKit.SharpnessKey;
         paletteKey?: keyof NCoreUIKit.PaletteKey;
         themeKey?: keyof NCoreUIKit.ThemeKey;
     };
+    style?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
     spreadBehaviour?: ButtonSpreadBehaviour;
     iconDirection?: "left" | "right";
     renderLoading?: () => ReactNode;
-    customBorderColor?: string;
     isCustomPadding?: boolean;
-    customIconColor?: string;
-    customTextColor?: string;
     variant?: ButtonVariant;
     icon?: NCoreUIKitIcon;
-    customColor?: string;
     isDisabled?: boolean;
     onPress: () => void;
     isLoading?: boolean;

src/components/index.ts

@@ -146,6 +146,14 @@ export {
     default as ThemeSwitcher
 } from "./themeSwitcher";
 
+export {
+    default as PaletteSwitcher
+} from "./paletteSwitcher";
+
+export {
+    default as Avatar
+} from "./avatar";
+
 export type {
     EnterMarkdownTypes,
     CodeMarkdownTypes,

src/components/paletteSwitcher/index.tsx

@@ -0,0 +1,154 @@
+import {
+    useEffect,
+    useState,
+    type FC
+} from "react";
+import type IPaletteSwitcherProps from "./type";
+import type {
+    ThemeSwitchVariants
+} from "./type";
+import {
+    NCoreUIKitTheme
+} from "../../core/hooks";
+import type {
+    NCoreUIKitIcon
+} from "../../types";
+import Button from "../button";
+import {
+    CayCoreIcon,
+    NIBGATCommunityIcon,
+    NIBGATIcon
+} from "../../assets/svg";
+
+const PaletteSwitcher: FC<IPaletteSwitcherProps> = ({
+    variants: variantsProps = [],
+    isWorkWithNextShowSystem,
+    customTheme,
+    color,
+    style,
+    ...props
+}) => {
+    const {
+        activePalette,
+        paletteKeys
+    } = NCoreUIKitTheme.useContext(customTheme);
+
+    const [
+        currentIndex,
+        setCurrentIndex
+    ] = useState(paletteKeys.findIndex(t => t === activePalette));
+
+    useEffect(() => {
+        const cI = paletteKeys.findIndex(tI => tI === activePalette);
+
+        const nextCI = isWorkWithNextShowSystem ? cI + 1 > paletteKeys.length - 1 ? 0 : cI + 1 : cI;
+
+        if(currentIndex !== nextCI) {
+            setCurrentIndex(nextCI);
+        }
+    }, [activePalette]);
+
+    const variantsPre: ThemeSwitchVariants = variantsProps;
+
+    const isHaveNC = variantsProps.findIndex(iV => iV.paletteKey === "nibgat-community") !== -1;
+    const isHaveCC = variantsProps.findIndex(iV => iV.paletteKey === "caycore") !== -1;
+    const isHaveN = variantsProps.findIndex(iV => iV.paletteKey === "nibgat") !== -1;
+
+    if(!isHaveN) {
+        variantsPre.unshift({
+            borderColor: "transparent",
+            backgroundColor: "subtle",
+            paletteKey: "nibgat",
+            iconColor: "moon",
+            icon: ({
+                size
+            }) => {
+                return <NIBGATIcon
+                    size={size + 5}
+                />;
+            }
+        });
+    }
+
+    if(!isHaveNC) {
+        variantsPre.unshift({
+            paletteKey: "nibgat-community",
+            borderColor: "transparent",
+            backgroundColor: "subtle",
+            iconColor: "moon",
+            icon: ({
+                size
+            }) => {
+                return <NIBGATCommunityIcon
+                    size={size + 5}
+                />;
+            }
+        });
+    }
+
+    if(!isHaveCC) {
+        variantsPre.unshift({
+            borderColor: "transparent",
+            backgroundColor: "subtle",
+            paletteKey: "caycore",
+            iconColor: "moon",
+            icon: ({
+                size
+            }) => {
+                return <CayCoreIcon
+                    size={size + 5}
+                />;
+            }
+        });
+    }
+
+    const variants = [...variantsPre].sort((a, b) => {
+        return paletteKeys.indexOf(a.paletteKey) - paletteKeys.indexOf(b.paletteKey);
+    });
+
+    const currentVariantIndex = variants.findIndex(e => e.paletteKey === activePalette);
+
+    if(currentVariantIndex === -1) {
+        return null;
+    }
+
+    const nextVariantIndex = currentVariantIndex + 1;
+    const viewVariantIndex = nextVariantIndex > variants.length - 1 ? 0 : nextVariantIndex;
+
+    const currentVariant = variants[isWorkWithNextShowSystem ? viewVariantIndex : currentVariantIndex];
+
+    return <Button
+        {...props}
+        customBorderColor={currentVariant && currentVariant.borderColor ?
+            currentVariant.borderColor
+            :
+            color
+        }
+        customColor={currentVariant && currentVariant.backgroundColor ?
+            currentVariant.backgroundColor
+            :
+            color
+        }
+        icon={({
+            color,
+            size
+        }) => {
+            const Icon = currentVariant?.icon as NCoreUIKitIcon;
+
+            return <Icon
+                customColor={currentVariant && currentVariant.iconColor ? currentVariant.iconColor : undefined}
+                color={color}
+                size={size}
+            />;
+        }}
+        onPress={() => {
+            NCoreUIKitTheme.switch({
+                paletteKey: paletteKeys[viewVariantIndex]
+            });
+        }}
+        style={[
+            style
+        ]}
+    />;
+};
+export default PaletteSwitcher;

src/components/paletteSwitcher/type.ts

@@ -0,0 +1,34 @@
+import {
+    type TextStyle,
+    type StyleProp
+} from "react-native";
+import type {
+    NCoreUIKitIcon
+} from "../../types";
+import type IButtonProps from "../button/type";
+
+export type PaltteSwitchVariant = {
+    backgroundColor: keyof NCoreUIKit.ContainerContentColors | "transparent";
+    borderColor: keyof NCoreUIKit.BorderContentColors | "transparent";
+    iconColor: keyof NCoreUIKit.ProjectColorPalette;
+    paletteKey: keyof NCoreUIKit.PaletteKey;
+    icon: NCoreUIKitIcon;
+};
+
+export type ThemeSwitchVariants = Array<PaltteSwitchVariant>;
+
+interface IPaletteSwitcherProps extends Omit<IButtonProps, "onPress"> {
+    color?: keyof NCoreUIKit.ContainerContentColors | "transparent";
+    customTheme?: {
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
+    };
+    style?: StyleProp<TextStyle>[] | StyleProp<TextStyle>;
+    isWorkWithNextShowSystem?: boolean;
+    variants?: ThemeSwitchVariants;
+}
+export type {
+    IPaletteSwitcherProps as default
+};

src/components/text/type.ts

@@ -8,10 +8,10 @@ import {
 } from "react-native";
 
 interface ITextProps extends TextProps {
+    customColor?: keyof NCoreUIKit.ProjectColorPalette | (string & {});
     style?: StyleProp<TextStyle>[] | StyleProp<TextStyle>;
     color?: keyof NCoreUIKit.TextContentColors;
     variant?: keyof NCoreUIKit.Typography;
-    customColor?: string;
     children?: ReactNode;
     customTheme?: {
         gapPropagation?: keyof NCoreUIKit.GapPropagationKey;

src/components/themeSwitcher/index.tsx

@@ -21,6 +21,7 @@ import Button from "../button";
 
 const ThemeSwitcher: FC<IThemeSwitcherProps> = ({
     variants: variantsProps = [],
+    isWorkWithNextShowSystem,
     customTheme,
     color,
     style,
@@ -38,64 +39,89 @@ const ThemeSwitcher: FC<IThemeSwitcherProps> = ({
     ] = useState(themeKeys.findIndex(t => t === activeTheme));
 
     useEffect(() => {
-        const currentTheme = themeKeys[currentIndex];
+        const cI = themeKeys.findIndex(tI => tI === activeTheme);
 
-        NCoreUIKitTheme.switch({
-            themeKey: currentTheme
-        });
-    }, [currentIndex]);
+        const nextCI = isWorkWithNextShowSystem ? cI + 1 > themeKeys.length - 1 ? 0 : cI + 1 : cI;
+
+        if(currentIndex !== nextCI) {
+            setCurrentIndex(nextCI);
+        }
+    }, [activeTheme]);
 
-    const variants: ThemeSwitchVariants = variantsProps;
+    const variantsPre: ThemeSwitchVariants = variantsProps;
 
     const isHaveLight = variantsProps.findIndex(iV => iV.themeKey === "light") !== -1;
     const isHaveDark = variantsProps.findIndex(iV => iV.themeKey === "dark") !== -1;
 
     if(!isHaveDark) {
-        variants.unshift({
+        variantsPre.unshift({
             borderColor: "transparent",
             backgroundColor: "subtle",
-            iconColor: "info",
+            iconColor: "moon",
             themeKey: "dark",
             icon: ({
+                customColor,
                 color,
                 size
-            }) => <MoonIcon
-                color={colors.content.icon[color]}
-                size={size + 5}
-            />
+            }) => {
+                const _customColor = customColor as keyof NCoreUIKit.ProjectColorPalette;
+
+                return <MoonIcon
+                    color={customColor ? colors.project[_customColor] ? colors.project[_customColor] : customColor : colors.content.icon[color]}
+                    size={size + 5}
+                />;
+            }
         });
     }
 
     if(!isHaveLight) {
-        variants.unshift({
+        variantsPre.unshift({
             borderColor: "transparent",
             backgroundColor: "subtle",
-            iconColor: "warning",
             themeKey: "light",
+            iconColor: "sun",
             icon: ({
+                customColor,
                 color,
                 size
-            }) => <SunIcon
-                color={colors.content.icon[color]}
-                size={size + 5}
-            />
+            }) => {
+                const _customColor = customColor as keyof NCoreUIKit.ProjectColorPalette;
+
+                return <SunIcon
+                    color={customColor ? colors.project[_customColor] ? colors.project[_customColor] : customColor : colors.content.icon[color]}
+                    size={size + 5}
+                />;
+            }
         });
     }
 
-    const currentVariant = variants.find(e => e.themeKey === activeTheme);
+    const variants = [...variantsPre].sort((a, b) => {
+        return themeKeys.indexOf(a.themeKey) - themeKeys.indexOf(b.themeKey);
+    });
+
+    const currentVariantIndex = variants.findIndex(e => e.themeKey === activeTheme);
 
-    if(!currentVariant) {
+    if(currentVariantIndex === -1) {
         return null;
     }
 
+    const nextVariantIndex = currentVariantIndex + 1;
+    const viewVariantIndex = nextVariantIndex > variants.length - 1 ? 0 : nextVariantIndex;
+
+    const currentVariant = variants[isWorkWithNextShowSystem ? viewVariantIndex : currentVariantIndex];
+
     return <Button
         {...props}
-        customBorderColor={currentVariant && currentVariant.backgroundColor ?
+        customBorderColor={currentVariant && currentVariant.borderColor ?
+            currentVariant.borderColor
+            :
+            color
+        }
+        customColor={currentVariant && currentVariant.backgroundColor ?
             currentVariant.backgroundColor
             :
             color
         }
-        customColor={currentVariant && currentVariant.backgroundColor ? currentVariant.backgroundColor : color}
         icon={({
             color,
             size
@@ -103,12 +129,15 @@ const ThemeSwitcher: FC<IThemeSwitcherProps> = ({
             const Icon = currentVariant?.icon as NCoreUIKitIcon;
 
             return <Icon
-                color={currentVariant && currentVariant.iconColor ? currentVariant.iconColor : color}
+                customColor={currentVariant && currentVariant.iconColor ? currentVariant.iconColor : undefined}
+                color={color}
                 size={size}
             />;
         }}
         onPress={() => {
-            setCurrentIndex(currentIndex + 1 > themeKeys.length - 1 ? 0 : currentIndex + 1);
+            NCoreUIKitTheme.switch({
+                themeKey: themeKeys[viewVariantIndex]
+            });
         }}
         style={[
             style

src/components/themeSwitcher/type.ts

@@ -10,7 +10,7 @@ import type IButtonProps from "../button/type";
 export type ThemeSwitchVariant = {
     backgroundColor: keyof NCoreUIKit.ContainerContentColors | "transparent";
     borderColor: keyof NCoreUIKit.BorderContentColors | "transparent";
-    iconColor: keyof NCoreUIKit.IconContentColors;
+    iconColor: keyof NCoreUIKit.ProjectColorPalette;
     themeKey: keyof NCoreUIKit.ThemeKey;
     icon: NCoreUIKitIcon;
 };
@@ -26,6 +26,7 @@ interface IThemeSwitcherProps extends Omit<IButtonProps, "onPress"> {
         themeKey?: keyof NCoreUIKit.ThemeKey;
     };
     style?: StyleProp<TextStyle>[] | StyleProp<TextStyle>;
+    isWorkWithNextShowSystem?: boolean;
     variants?: ThemeSwitchVariants;
 }
 export type {

src/context/theme.tsx

@@ -79,6 +79,7 @@ class NCoreUIKitTheme<T extends ThemesType> extends NCoreContext<ThemeContextTyp
         const initialTheme = initialPalette.themes[initialSelectedTheme ?? "light"];
 
         super({
+            paletteKeys: defaultPaletteData.palettes.map(p => p.name) as Array<keyof NCoreUIKit.PaletteKey>,
             themeKeys: Object.keys(initialPalette.themes) as Array<keyof NCoreUIKit.ThemeKey>,
             activeGapPropagation: initialSelectedGapPropagation ?? "compact",
             activeSharpness: initialSelectedActiveSharpness ?? "soft",
@@ -121,6 +122,7 @@ class NCoreUIKitTheme<T extends ThemesType> extends NCoreContext<ThemeContextTyp
         const defaultTheme = defaultPalette.themes[theme as keyof typeof defaultPalette.themes] ?? defaultPalette.themes.dark;
 
         const defaultState: ThemeContextStateType = {
+            paletteKeys: defaultPaletteData.palettes.map(p => p.name) as Array<keyof NCoreUIKit.PaletteKey>,
             themeKeys: Object.keys(defaultPalette.themes) as Array<keyof NCoreUIKit.ThemeKey>,
             typography: defaultPaletteData.typography[gapPropagation],
             spaces: defaultPaletteData.shapes.spaces[gapPropagation],
@@ -167,12 +169,18 @@ class NCoreUIKitTheme<T extends ThemesType> extends NCoreContext<ThemeContextTyp
             theme
         );
 
-        const dPKeys = [
+        const dPKeys = [...new Set([
             ...Object.keys(defaultPaletteData.palettes[0]?.themes ?? currentProjectPalette.themes),
             ...Object.keys(this.projectThemes.palettes[0]?.themes ?? currentProjectPalette.themes)
-        ];
+        ])];
+
+        const dPPKeys = [...new Set([
+            ...defaultPaletteData.palettes.map(p => p.name),
+            ...this.projectThemes.palettes.map(p => p.name)
+        ])];
 
         const newState: ThemeContextStateType = {
+            paletteKeys: dPPKeys as Array<keyof NCoreUIKit.PaletteKey>,
             themeKeys: dPKeys as Array<keyof NCoreUIKit.ThemeKey>,
             typography: typography[gapPropagation],
             spaces: shapes.spaces[gapPropagation],

src/helpers/locale/index.ts

@@ -1,4 +1,4 @@
-export const parseRRuleConfig = (rawConfig: NCoreUIKit.GeneratedRRuleConfigs) => {
+export const parseRRuleConfig = (rawConfig: NCoreUIKit.GeneratedRRuleConfigsForReturn) => {
     const tokens: {
         [key: string]: RegExp;
     } = {

src/helpers/theme/palette.ts

@@ -31,6 +31,7 @@ export const mergeTheme = (
     projectTheme: NCoreUIKit.ThemeTokens
 ): NCoreUIKit.ThemeTokens => {
     return {
+        project: mergeCurrent(defaultTheme.project as unknown as RecursiveRecord, projectTheme.project as unknown as RecursiveRecord),
         content: mergeCurrent(defaultTheme.content as unknown as RecursiveRecord, projectTheme.content as unknown as RecursiveRecord),
         system: mergeCurrent(defaultTheme.system as unknown as RecursiveRecord, projectTheme.system as unknown as RecursiveRecord)
     };

src/index.tsx

@@ -15,6 +15,7 @@ export {
 
 export {
     NotificationIndicator,
+    PaletteSwitcher,
     MarkdownViewer,
     DateTimePicker,
     PageContainer,
@@ -37,6 +38,7 @@ export {
     RowCard,
     Loading,
     Dialog,
+    Avatar,
     Switch,
     Button,
     Header,

src/types/icon.ts

@@ -6,9 +6,9 @@ import {
 } from "react-native-svg";
 
 export interface INCoreUIKitIconProps {
+    customColor?: keyof NCoreUIKit.ProjectColorPalette | (string & {});
     color?: keyof NCoreUIKit.IconContentColors;
     style?: SvgProps["style"];
-    customColor?: string;
     size?: number;
 }
 

src/types/index.ts

@@ -164,12 +164,19 @@ declare global {
         type ColorsMerged = DefaultSystemColors & DefaultContentColors;
 
         type ThemeTokens = {
+            project: ProjectColorPalette;
             content: ContentColorPalette;
             system: SystemColorPalette;
         };
 
         type DefaultPalette = typeof defaultThemeJSON.palettes[0];
 
+        type ProjectData = DefaultPalette["themes"]["dark"]["project"];
+        type DefaultProjectColors = ProjectData;
+
+        interface ProjectColorPalette extends DefaultProjectColors {
+        }
+
         type SystemData = DefaultPalette["themes"]["dark"]["system"];
         type DefaultSystemColors = SystemData;
 
@@ -201,6 +208,10 @@ declare global {
 
         type DefaultLocalization = typeof defaultLocaleJSON[0];
 
+        type GeneratedRRuleConfigsForReturn = {
+            [K in keyof DefaultLocalization["rruleConfig"]]: DefaultLocalization["rruleConfig"][K];
+        };
+
         type GeneratedRRuleConfigs = {
             [K in keyof DefaultLocalization["rruleConfig"]]?: DefaultLocalization["rruleConfig"][K];
         };

src/types/locale.ts

@@ -14,7 +14,7 @@ export type LocaleType = "en-US" | "tr-TR";
 export type LocalizeContextStateType = Partial<LocalizeContextType>;
 
 export type LocalizeContextType = {
-    rruleConfig: NCoreUIKit.GeneratedRRuleConfigs;
+    rruleConfig: NCoreUIKit.GeneratedRRuleConfigsForReturn;
     translations: NCoreUIKit.Translation;
     localizeWithObject: (
         translation: keyof NCoreUIKit.Translation,

src/types/theme.ts

@@ -17,6 +17,7 @@ export type ThemeType = "light" | "dark";
 export type ThemeContextStateType = Partial<ThemeContextType>;
 
 export type ThemeContextType = {
+    paletteKeys: Array<keyof NCoreUIKit.PaletteKey>;
     themeKeys: Array<keyof NCoreUIKit.ThemeKey>;
     activePalette: keyof NCoreUIKit.PaletteKey;
     activeGapPropagation: GapPropagationType;

src/variants/themes/default.json

@@ -473,6 +473,10 @@
                             "warning": "rgba(255,223,102,1)",
                             "info": "rgba(167,230,255,1)"
                         }
+                    },
+                    "project": {
+                        "moon": "#0F5792",
+                        "sun": "#C09E13"
                     }
                 },
                 "light": {
@@ -661,6 +665,740 @@
                             "warning": "rgba(176,108,0,1)",
                             "info": "rgba(37,123,167,1)"
                         }
+                    },
+                    "project": {
+                        "moon": "#54A7EB",
+                        "sun": "#FFCF11"
+                    }
+                }
+            }
+        },
+        {
+            "name": "nibgat-community",
+            "themes": {
+                "dark": {
+                    "system": {
+                        "default": {
+                            "primary": "rgba(140,110,255,1)",
+                            "secondary": "rgba(180,190,255,1)",
+                            "tertiary": "rgba(160,220,255,1)",
+                            "error": "rgba(255,160,160,1)",
+                            "success": "rgba(170,255,190,1)",
+                            "warning": "rgba(255,220,140,1)",
+                            "info": "rgba(170,230,255,1)",
+                            "background": "rgba(18,18,28,1)",
+                            "surface": "rgba(18,18,28,1)"
+                        },
+                        "on": {
+                            "primary": "rgba(30,20,70,1)",
+                            "secondary": "rgba(30,40,60,1)",
+                            "tertiary": "rgba(20,50,70,1)",
+                            "error": "rgba(80,0,0,1)",
+                            "success": "rgba(20,70,30,1)",
+                            "warning": "rgba(80,50,0,1)",
+                            "info": "rgba(0,60,90,1)",
+                            "background": "rgba(230,230,240,1)",
+                            "surface": "rgba(230,230,240,1)"
+                        },
+                        "container": {
+                            "primary": "rgba(60,40,120,1)",
+                            "secondary": "rgba(50,60,100,1)",
+                            "tertiary": "rgba(40,80,120,1)",
+                            "error": "rgba(140,0,20,1)",
+                            "success": "rgba(40,90,60,1)",
+                            "warning": "rgba(120,80,0,1)",
+                            "info": "rgba(30,90,140,1)"
+                        },
+                        "onContainer": {
+                            "primary": "rgba(220,210,255,1)",
+                            "secondary": "rgba(220,230,255,1)",
+                            "tertiary": "rgba(200,240,255,1)",
+                            "error": "rgba(255,200,200,1)",
+                            "success": "rgba(210,255,220,1)",
+                            "warning": "rgba(255,240,210,1)",
+                            "info": "rgba(210,240,255,1)"
+                        },
+                        "variant": { "surface": "rgba(30,30,45,1)" },
+                        "onVariant": { "surface": "rgba(200,200,220,1)" },
+                        "outline": "rgba(120,120,140,1)",
+                        "shadow": "rgba(0,0,0,1)",
+                        "scrim": "rgba(0,0,0,0.5)",
+                        "onMid": { "surface": "rgba(255,255,255,0.64)" },
+                        "onLow": { "surface": "rgba(255,255,255,0.32)" },
+                        "state": {
+                            "overlay": {
+                                "hover": {
+                                    "default": "rgba(255,255,255,0.24)",
+                                    "primary": "rgba(140,110,255,0.12)",
+                                    "error": "rgba(255,160,160,0.24)",
+                                    "warning": "rgba(255,220,140,0.24)",
+                                    "success": "rgba(170,255,190,0.24)",
+                                    "neutral": "rgba(200,200,200,0.24)",
+                                    "info": "rgba(170,230,255,0.24)"
+                                },
+                                "focus": {
+                                    "default": "rgba(255,255,255,0.64)",
+                                    "primary": "rgba(140,110,255,0.32)",
+                                    "error": "rgba(255,160,160,0.32)",
+                                    "warning": "rgba(255,220,140,0.32)",
+                                    "success": "rgba(170,255,190,0.32)",
+                                    "neutral": "rgba(200,200,200,0.32)",
+                                    "info": "rgba(170,230,255,0.32)"
+                                },
+                                "pressed": {
+                                    "default": "rgba(255,255,255,0.32)",
+                                    "primary": "rgba(140,110,255,0.32)",
+                                    "error": "rgba(255,160,160,0.32)",
+                                    "warning": "rgba(255,220,140,0.32)",
+                                    "success": "rgba(170,255,190,0.32)",
+                                    "neutral": "rgba(200,200,200,0.32)",
+                                    "info": "rgba(170,230,255,0.32)"
+                                },
+                                "disabled": {
+                                    "primary": "rgba(140,110,255,0.24)",
+                                    "error": "rgba(255,160,160,0.24)",
+                                    "warning": "rgba(255,220,140,0.24)",
+                                    "success": "rgba(170,255,190,0.24)",
+                                    "neutral": "rgba(200,200,200,0.08)",
+                                    "info": "rgba(170,230,255,0.24)"
+                                }
+                            },
+                            "border": {
+                                "disabled": {
+                                    "primary": "rgba(140,110,255,0.64)",
+                                    "error": "rgba(255,160,160,0.32)",
+                                    "warning": "rgba(255,220,140,0.32)",
+                                    "success": "rgba(170,255,190,0.32)",
+                                    "neutral": "rgba(200,200,200,0.32)",
+                                    "info": "rgba(170,230,255,0.32)"
+                                }
+                            },
+                            "content": {
+                                "disabled": {
+                                    "primary": "rgba(140,110,255,0.64)",
+                                    "error": "rgba(255,160,160,0.32)",
+                                    "warning": "rgba(255,220,140,0.32)",
+                                    "success": "rgba(170,255,190,0.32)",
+                                    "neutral": "rgba(200,200,200,0.32)",
+                                    "info": "rgba(170,230,255,0.32)"
+                                },
+                                "mid": { "error": "rgba(255,255,255,1)" }
+                            }
+                        },
+                        "disabled": { "content": "rgba(255,255,255,0.24)" },
+                        "low": {
+                            "error": "rgba(255,160,160,0.32)",
+                            "warning": "rgba(255,220,140,0.32)",
+                            "success": "rgba(170,255,190,0.32)",
+                            "info": "rgba(170,230,255,0.32)"
+                        }
+                    },
+                    "content": {
+                        "text": {
+                            "high": "rgba(230,230,240,1)",
+                            "mid": "rgba(255,255,255,0.64)",
+                            "low": "rgba(255,255,255,0.32)",
+                            "disabled": "rgba(255,255,255,0.24)",
+                            "emphasized": "rgba(140,110,255,1)",
+                            "link": "rgba(140,110,255,1)",
+                            "onPrimary": "rgba(30,20,70,1)",
+                            "danger": "rgba(255,160,160,1)",
+                            "success": "rgba(170,255,190,1)",
+                            "warning": "rgba(255,220,140,1)",
+                            "info": "rgba(170,230,255,1)",
+                            "disabledWhite": "rgba(255,255,255,0.32)",
+                            "dangerLow": "rgba(255,160,160,0.32)",
+                            "warningLow": "rgba(255,220,140,0.32)",
+                            "successLow": "rgba(170,255,190,0.32)",
+                            "infoLow": "rgba(170,230,255,0.32)"
+                        },
+                        "icon": {
+                            "default": "rgba(200,200,220,1)",
+                            "emphasized": "rgba(140,110,255,1)",
+                            "disabled": "rgba(255,255,255,0.24)",
+                            "onPrimary": "rgba(30,20,70,1)",
+                            "danger": "rgba(255,160,160,1)",
+                            "success": "rgba(170,255,190,1)",
+                            "warning": "rgba(255,220,140,1)",
+                            "info": "rgba(170,230,255,1)",
+                            "low": "rgba(255,255,255,0.32)",
+                            "mid": "rgba(255,255,255,0.64)",
+                            "high": "rgba(230,230,240,1)",
+                            "disabledWhite": "rgba(255,255,255,0.32)"
+                        },
+                        "container": {
+                            "default": "rgba(18,18,28,1)",
+                            "subtle": "rgba(30,30,45,1)",
+                            "emphasized": "rgba(60,40,120,1)",
+                            "selected": "rgba(60,40,120,1)",
+                            "mid": "rgba(25, 25, 35, 1)",
+                            "inverse": "rgba(140,110,255,1)",
+                            "overlay": "rgba(0,0,0,0.5)",
+                            "danger": "rgba(140,0,20,1)",
+                            "success": "rgba(40,90,60,1)",
+                            "warning": "rgba(120,80,0,1)",
+                            "info": "rgba(30,90,140,1)",
+                            "primary": "rgba(140,110,255,1)"
+                        },
+                        "border": {
+                            "default": "rgba(120,120,140,1)",
+                            "subtle": "rgba(30,30,45,1)",
+                            "emphasized": "rgba(140,110,255,1)",
+                            "danger": "rgba(255,160,160,1)",
+                            "success": "rgba(170,255,190,1)",
+                            "disabled": "rgba(255,255,255,0.24)",
+                            "warning": "rgba(255,220,140,1)",
+                            "info": "rgba(170,230,255,1)"
+                        }
+                    },
+                    "project": {
+                        "moon": "#6D5BFF",
+                        "sun": "#FFD36A"
+                    }
+                },
+                "light": {
+                    "system": {
+                        "default": {
+                            "primary": "rgba(60,40,120,1)",
+                            "secondary": "rgba(50,60,100,1)",
+                            "tertiary": "rgba(40,80,120,1)",
+                            "error": "rgba(140,0,20,1)",
+                            "success": "rgba(40,90,60,1)",
+                            "warning": "rgba(120,80,0,1)",
+                            "info": "rgba(30,90,140,1)",
+                            "background": "rgba(230,230,240,1)",
+                            "surface": "rgba(230,230,240,1)"
+                        },
+                        "on": {
+                            "primary": "rgba(220,210,255,1)",
+                            "secondary": "rgba(220,230,255,1)",
+                            "tertiary": "rgba(200,240,255,1)",
+                            "error": "rgba(255,200,200,1)",
+                            "success": "rgba(210,255,220,1)",
+                            "warning": "rgba(255,240,210,1)",
+                            "info": "rgba(210,240,255,1)",
+                            "background": "rgba(18,18,28,1)",
+                            "surface": "rgba(18,18,28,1)"
+                        },
+                        "container": {
+                            "primary": "rgba(140,110,255,1)",
+                            "secondary": "rgba(180,190,255,1)",
+                            "tertiary": "rgba(160,220,255,1)",
+                            "error": "rgba(255,160,160,1)",
+                            "success": "rgba(170,255,190,1)",
+                            "warning": "rgba(255,220,140,1)",
+                            "info": "rgba(170,230,255,1)"
+                        },
+                        "onContainer": {
+                            "primary": "rgba(30,20,70,1)",
+                            "secondary": "rgba(30,40,60,1)",
+                            "tertiary": "rgba(20,50,70,1)",
+                            "error": "rgba(80,0,0,1)",
+                            "success": "rgba(20,70,30,1)",
+                            "warning": "rgba(80,50,0,1)",
+                            "info": "rgba(0,60,90,1)"
+                        },
+                        "variant": { "surface": "rgba(200,200,220,1)" },
+                        "onVariant": { "surface": "rgba(30,30,45,1)" },
+                        "outline": "rgba(120,120,140,1)",
+                        "shadow": "rgba(0,0,0,1)",
+                        "scrim": "rgba(0,0,0,0.5)",
+                        "onMid": { "surface": "rgba(0,0,0,0.64)" },
+                        "onLow": { "surface": "rgba(0,0,0,0.32)" },
+                        "state": {
+                            "overlay": {
+                                "hover": {
+                                    "default": "rgba(0,0,0,0.24)",
+                                    "primary": "rgba(140,110,255,0.24)",
+                                    "error": "rgba(255,160,160,0.24)",
+                                    "warning": "rgba(255,220,140,0.24)",
+                                    "success": "rgba(170,255,190,0.24)",
+                                    "neutral": "rgba(120,120,140,0.24)",
+                                    "info": "rgba(170,230,255,0.24)"
+                                },
+                                "focus": {
+                                    "default": "rgba(0,0,0,0.64)",
+                                    "primary": "rgba(60,40,120,0.32)",
+                                    "error": "rgba(140,0,20,0.32)",
+                                    "warning": "rgba(120,80,0,0.32)",
+                                    "success": "rgba(40,90,60,0.32)",
+                                    "neutral": "rgba(120,120,140,0.32)",
+                                    "info": "rgba(30,90,140,0.32)"
+                                },
+                                "pressed": {
+                                    "default": "rgba(0,0,0,0.32)",
+                                    "primary": "rgba(60,40,120,0.32)",
+                                    "error": "rgba(140,0,20,0.32)",
+                                    "warning": "rgba(120,80,0,0.32)",
+                                    "success": "rgba(40,90,60,0.32)",
+                                    "neutral": "rgba(120,120,140,0.32)",
+                                    "info": "rgba(30,90,140,0.32)"
+                                },
+                                "disabled": {
+                                    "primary": "rgba(60,40,120,0.24)",
+                                    "error": "rgba(140,0,20,0.24)",
+                                    "warning": "rgba(120,80,0,0.24)",
+                                    "success": "rgba(40,90,60,0.24)",
+                                    "neutral": "rgba(120,120,140,0.08)",
+                                    "info": "rgba(30,90,140,0.24)"
+                                }
+                            },
+                            "border": {
+                                "disabled": {
+                                    "primary": "rgba(60,40,120,0.32)",
+                                    "error": "rgba(140,0,20,0.32)",
+                                    "warning": "rgba(120,80,0,0.32)",
+                                    "success": "rgba(40,90,60,0.32)",
+                                    "neutral": "rgba(120,120,140,0.32)",
+                                    "info": "rgba(30,90,140,0.32)"
+                                }
+                            },
+                            "content": {
+                                "disabled": {
+                                    "primary": "rgba(140,110,255,0.32)",
+                                    "error": "rgba(255,160,160,0.32)",
+                                    "warning": "rgba(255,220,140,0.32)",
+                                    "success": "rgba(170,255,190,0.32)",
+                                    "neutral": "rgba(120,120,140,0.32)",
+                                    "info": "rgba(170,230,255,0.32)"
+                                },
+                                "mid": { "error": "rgba(0,0,0,1)" }
+                            }
+                        },
+                        "disabled": { "content": "rgba(0,0,0,0.24)" },
+                        "low": {
+                            "error": "rgba(140,0,20,0.32)",
+                            "warning": "rgba(120,80,0,0.32)",
+                            "success": "rgba(40,90,60,0.32)",
+                            "info": "rgba(30,90,140,0.32)"
+                        }
+                    },
+                    "content": {
+                        "text": {
+                            "high": "rgba(18,18,28,1)",
+                            "mid": "rgba(0,0,0,0.64)",
+                            "low": "rgba(0,0,0,0.32)",
+                            "disabled": "rgba(0,0,0,0.24)",
+                            "emphasized": "rgba(60,40,120,1)",
+                            "link": "rgba(60,40,120,1)",
+                            "onPrimary": "rgba(220,210,255,1)",
+                            "danger": "rgba(140,0,20,1)",
+                            "success": "rgba(40,90,60,1)",
+                            "warning": "rgba(120,80,0,1)",
+                            "info": "rgba(30,90,140,1)",
+                            "disabledWhite": "rgba(255,255,255,0.32)",
+                            "dangerLow": "rgba(140,0,20,0.32)",
+                            "warningLow": "rgba(120,80,0,0.32)",
+                            "successLow": "rgba(40,90,60,0.32)",
+                            "infoLow": "rgba(30,90,140,0.32)"
+                        },
+                        "icon": {
+                            "default": "rgba(120,120,140,1)",
+                            "emphasized": "rgba(60,40,120,1)",
+                            "disabled": "rgba(0,0,0,0.24)",
+                            "onPrimary": "rgba(220,210,255,1)",
+                            "danger": "rgba(140,0,20,1)",
+                            "success": "rgba(40,90,60,1)",
+                            "warning": "rgba(120,80,0,1)",
+                            "info": "rgba(30,90,140,1)",
+                            "low": "rgba(0,0,0,0.32)",
+                            "mid": "rgba(0,0,0,0.64)",
+                            "high": "rgba(18,18,28,1)",
+                            "disabledWhite": "rgba(255,255,255,0.32)"
+                        },
+                        "container": {
+                            "default": "rgba(230,230,240,1)",
+                            "subtle": "rgba(200,200,220,1)",
+                            "emphasized": "rgba(140,110,255,1)",
+                            "selected": "rgba(140,110,255,1)",
+                            "mid": "rgba(220, 220, 230, 1)",
+                            "inverse": "rgba(220,210,255,1)",
+                            "overlay": "rgba(0,0,0,0.5)",
+                            "danger": "rgba(255,200,200,1)",
+                            "success": "rgba(210,255,220,1)",
+                            "warning": "rgba(255,240,210,1)",
+                            "info": "rgba(210,240,255,1)",
+                            "primary": "rgba(60,40,120,1)"
+                        },
+                        "border": {
+                            "default": "rgba(120,120,140,1)",
+                            "subtle": "rgba(200,200,220,1)",
+                            "emphasized": "rgba(60,40,120,1)",
+                            "danger": "rgba(140,0,20,1)",
+                            "success": "rgba(40,90,60,1)",
+                            "disabled": "rgba(0,0,0,0.24)",
+                            "warning": "rgba(120,80,0,1)",
+                            "info": "rgba(30,90,140,1)"
+                        }
+                    },
+                    "project": {
+                        "moon": "#54A7EB",
+                        "sun": "#FFCF11"
+                    }
+                }
+            }
+        },
+        {
+            "name": "caycore",
+            "themes": {
+                "dark": {
+                    "system": {
+                        "default": {
+                            "primary": "rgba(255,60,60,1)",
+                            "secondary": "rgba(255,255,255,0.85)",
+                            "tertiary": "rgba(255,120,120,1)",
+                            "error": "rgba(255,140,140,1)",
+                            "success": "rgba(120,255,170,1)",
+                            "warning": "rgba(255,200,120,1)",
+                            "info": "rgba(120,200,255,1)",
+                            "background": "rgba(18,12,12,1)",
+                            "surface": "rgba(18,12,12,1)"
+                        },
+                        "on": {
+                            "primary": "rgba(60,0,0,1)",
+                            "secondary": "rgba(20,20,20,1)",
+                            "tertiary": "rgba(60,20,20,1)",
+                            "error": "rgba(80,0,0,1)",
+                            "success": "rgba(20,60,30,1)",
+                            "warning": "rgba(80,50,0,1)",
+                            "info": "rgba(0,60,90,1)",
+                            "background": "rgba(240,240,240,1)",
+                            "surface": "rgba(240,240,240,1)"
+                        },
+                        "container": {
+                            "primary": "rgba(120,0,0,1)",
+                            "secondary": "rgba(255,255,255,0.12)",
+                            "tertiary": "rgba(180,40,40,1)",
+                            "error": "rgba(140,0,20,1)",
+                            "success": "rgba(40,90,60,1)",
+                            "warning": "rgba(120,80,0,1)",
+                            "info": "rgba(30,90,140,1)"
+                        },
+                        "onContainer": {
+                            "primary": "rgba(255,200,200,1)",
+                            "secondary": "rgba(255,255,255,1)",
+                            "tertiary": "rgba(255,220,220,1)",
+                            "error": "rgba(255,200,200,1)",
+                            "success": "rgba(210,255,220,1)",
+                            "warning": "rgba(255,240,210,1)",
+                            "info": "rgba(210,240,255,1)"
+                        },
+                        "variant": { "surface": "rgba(28,18,18,1)" },
+                        "onVariant": { "surface": "rgba(220,220,220,1)" },
+                        "outline": "rgba(140,120,120,1)",
+                        "shadow": "rgba(0,0,0,1)",
+                        "scrim": "rgba(0,0,0,0.5)",
+                        "onMid": { "surface": "rgba(255,255,255,0.64)" },
+                        "onLow": { "surface": "rgba(255,255,255,0.32)" },
+                        "state": {
+                            "overlay": {
+                                "hover": {
+                                    "default": "rgba(255,255,255,0.24)",
+                                    "primary": "rgba(255,60,60,0.12)",
+                                    "error": "rgba(255,140,140,0.24)",
+                                    "warning": "rgba(255,200,120,0.24)",
+                                    "success": "rgba(120,255,170,0.24)",
+                                    "neutral": "rgba(200,200,200,0.24)",
+                                    "info": "rgba(120,200,255,0.24)"
+                                },
+                                "focus": {
+                                    "default": "rgba(255,255,255,0.64)",
+                                    "primary": "rgba(255,60,60,0.32)",
+                                    "error": "rgba(255,140,140,0.32)",
+                                    "warning": "rgba(255,200,120,0.32)",
+                                    "success": "rgba(120,255,170,0.32)",
+                                    "neutral": "rgba(200,200,200,0.32)",
+                                    "info": "rgba(120,200,255,0.32)"
+                                },
+                                "pressed": {
+                                    "default": "rgba(255,255,255,0.32)",
+                                    "primary": "rgba(255,60,60,0.32)",
+                                    "error": "rgba(255,140,140,0.32)",
+                                    "warning": "rgba(255,200,120,0.32)",
+                                    "success": "rgba(120,255,170,0.32)",
+                                    "neutral": "rgba(200,200,200,0.32)",
+                                    "info": "rgba(120,200,255,0.32)"
+                                },
+                                "disabled": {
+                                    "primary": "rgba(255,60,60,0.24)",
+                                    "error": "rgba(255,140,140,0.24)",
+                                    "warning": "rgba(255,200,120,0.24)",
+                                    "success": "rgba(120,255,170,0.24)",
+                                    "neutral": "rgba(200,200,200,0.08)",
+                                    "info": "rgba(120,200,255,0.24)"
+                                }
+                            },
+                            "border": {
+                                "disabled": {
+                                    "primary": "rgba(255,60,60,0.64)",
+                                    "error": "rgba(255,140,140,0.32)",
+                                    "warning": "rgba(255,200,120,0.32)",
+                                    "success": "rgba(120,255,170,0.32)",
+                                    "neutral": "rgba(200,200,200,0.32)",
+                                    "info": "rgba(120,200,255,0.32)"
+                                }
+                            },
+                            "content": {
+                                "disabled": {
+                                    "primary": "rgba(255,60,60,0.64)",
+                                    "error": "rgba(255,140,140,0.32)",
+                                    "warning": "rgba(255,200,120,0.32)",
+                                    "success": "rgba(120,255,170,0.32)",
+                                    "neutral": "rgba(200,200,200,0.32)",
+                                    "info": "rgba(120,200,255,0.32)"
+                                },
+                                "mid": { "error": "rgba(255,255,255,1)" }
+                            }
+                        },
+                        "disabled": { "content": "rgba(255,255,255,0.24)" },
+                        "low": {
+                            "error": "rgba(255,140,140,0.32)",
+                            "warning": "rgba(255,200,120,0.32)",
+                            "success": "rgba(120,255,170,0.32)",
+                            "info": "rgba(120,200,255,0.32)"
+                        }
+                    },
+                    "content": {
+                        "text": {
+                            "high": "rgba(255,240,240,1)",
+                            "mid": "rgba(255,255,255,0.64)",
+                            "low": "rgba(255,255,255,0.32)",
+                            "disabled": "rgba(255,255,255,0.24)",
+                            "emphasized": "rgba(255,60,60,1)",
+                            "link": "rgba(255,60,60,1)",
+                            "onPrimary": "rgba(60,0,0,1)",
+                            "danger": "rgba(255,140,140,1)",
+                            "success": "rgba(120,255,170,1)",
+                            "warning": "rgba(255,200,120,1)",
+                            "info": "rgba(120,200,255,1)",
+                            "disabledWhite": "rgba(255,255,255,0.32)",
+                            "dangerLow": "rgba(255,140,140,0.32)",
+                            "warningLow": "rgba(255,200,120,0.32)",
+                            "successLow": "rgba(120,255,170,0.32)",
+                            "infoLow": "rgba(120,200,255,0.32)"
+                        },
+                        "icon": {
+                            "default": "rgba(255,255,255,0.85)",
+                            "emphasized": "rgba(255,60,60,1)",
+                            "disabled": "rgba(255,255,255,0.24)",
+                            "onPrimary": "rgba(60,0,0,1)",
+                            "danger": "rgba(255,140,140,1)",
+                            "success": "rgba(120,255,170,1)",
+                            "warning": "rgba(255,200,120,1)",
+                            "info": "rgba(120,200,255,1)",
+                            "low": "rgba(255,255,255,0.32)",
+                            "mid": "rgba(255,255,255,0.64)",
+                            "high": "rgba(255,240,240,1)",
+                            "disabledWhite": "rgba(255,255,255,0.32)"
+                        },
+                        "container": {
+                            "default": "rgba(18,12,12,1)",
+                            "subtle": "rgba(28,18,18,1)",
+                            "emphasized": "rgba(120,0,0,1)",
+                            "selected": "rgba(120,0,0,1)",
+                            "mid": "rgba(25, 20, 20, 1)",
+                            "inverse": "rgba(255,60,60,1)",
+                            "overlay": "rgba(0,0,0,0.5)",
+                            "danger": "rgba(140,0,20,1)",
+                            "success": "rgba(40,90,60,1)",
+                            "warning": "rgba(120,80,0,1)",
+                            "info": "rgba(30,90,140,1)",
+                            "primary": "rgba(255,60,60,1)"
+                        },
+                        "border": {
+                            "default": "rgba(140,120,120,1)",
+                            "subtle": "rgba(28,18,18,1)",
+                            "emphasized": "rgba(255,60,60,1)",
+                            "danger": "rgba(255,140,140,1)",
+                            "success": "rgba(120,255,170,1)",
+                            "disabled": "rgba(255,255,255,0.24)",
+                            "warning": "rgba(255,200,120,1)",
+                            "info": "rgba(120,200,255,1)"
+                        }
+                    },
+                    "project": {
+                        "moon": "#FF4D4D",
+                        "sun": "#FFFFFF"
+                    }
+                },
+                "light": {
+                    "system": {
+                        "default": {
+                            "primary": "rgba(120,0,0,1)",
+                            "secondary": "rgba(20,20,20,1)",
+                            "tertiary": "rgba(60,20,20,1)",
+                            "error": "rgba(80,0,0,1)",
+                            "success": "rgba(20,60,30,1)",
+                            "warning": "rgba(80,50,0,1)",
+                            "info": "rgba(0,60,90,1)",
+                            "background": "rgba(240,240,240,1)",
+                            "surface": "rgba(240,240,240,1)"
+                        },
+                        "on": {
+                            "primary": "rgba(255,200,200,1)",
+                            "secondary": "rgba(255,255,255,1)",
+                            "tertiary": "rgba(255,220,220,1)",
+                            "error": "rgba(255,200,200,1)",
+                            "success": "rgba(210,255,220,1)",
+                            "warning": "rgba(255,240,210,1)",
+                            "info": "rgba(210,240,255,1)",
+                            "background": "rgba(18,12,12,1)",
+                            "surface": "rgba(18,12,12,1)"
+                        },
+                        "container": {
+                            "primary": "rgba(255,60,60,1)",
+                            "secondary": "rgba(255,255,255,0.85)",
+                            "tertiary": "rgba(255,120,120,1)",
+                            "error": "rgba(255,140,140,1)",
+                            "success": "rgba(120,255,170,1)",
+                            "warning": "rgba(255,200,120,1)",
+                            "info": "rgba(120,200,255,1)"
+                        },
+                        "onContainer": {
+                            "primary": "rgba(60,0,0,1)",
+                            "secondary": "rgba(20,20,20,1)",
+                            "tertiary": "rgba(60,20,20,1)",
+                            "error": "rgba(80,0,0,1)",
+                            "success": "rgba(20,60,30,1)",
+                            "warning": "rgba(80,50,0,1)",
+                            "info": "rgba(0,60,90,1)"
+                        },
+                        "variant": { "surface": "rgba(220,220,220,1)" },
+                        "onVariant": { "surface": "rgba(28,18,18,1)" },
+                        "outline": "rgba(140,120,120,1)",
+                        "shadow": "rgba(0,0,0,1)",
+                        "scrim": "rgba(0,0,0,0.5)",
+                        "onMid": { "surface": "rgba(0,0,0,0.64)" },
+                        "onLow": { "surface": "rgba(0,0,0,0.32)" },
+                        "state": {
+                            "overlay": {
+                                "hover": {
+                                    "default": "rgba(0,0,0,0.24)",
+                                    "primary": "rgba(255,60,60,0.24)",
+                                    "error": "rgba(255,140,140,0.24)",
+                                    "warning": "rgba(255,200,120,0.24)",
+                                    "success": "rgba(120,255,170,0.24)",
+                                    "neutral": "rgba(140,120,120,0.24)",
+                                    "info": "rgba(120,200,255,0.24)"
+                                },
+                                "focus": {
+                                    "default": "rgba(0,0,0,0.64)",
+                                    "primary": "rgba(120,0,0,0.32)",
+                                    "error": "rgba(140,0,20,0.32)",
+                                    "warning": "rgba(120,80,0,0.32)",
+                                    "success": "rgba(40,90,60,0.32)",
+                                    "neutral": "rgba(140,120,120,0.32)",
+                                    "info": "rgba(30,90,140,0.32)"
+                                },
+                                "pressed": {
+                                    "default": "rgba(0,0,0,0.32)",
+                                    "primary": "rgba(120,0,0,0.32)",
+                                    "error": "rgba(140,0,20,0.32)",
+                                    "warning": "rgba(120,80,0,0.32)",
+                                    "success": "rgba(40,90,60,0.32)",
+                                    "neutral": "rgba(140,120,120,0.32)",
+                                    "info": "rgba(30,90,140,0.32)"
+                                },
+                                "disabled": {
+                                    "primary": "rgba(120,0,0,0.24)",
+                                    "error": "rgba(140,0,20,0.24)",
+                                    "warning": "rgba(120,80,0,0.24)",
+                                    "success": "rgba(40,90,60,0.24)",
+                                    "neutral": "rgba(140,120,120,0.08)",
+                                    "info": "rgba(30,90,140,0.24)"
+                                }
+                            },
+                            "border": {
+                                "disabled": {
+                                    "primary": "rgba(120,0,0,0.32)",
+                                    "error": "rgba(140,0,20,0.32)",
+                                    "warning": "rgba(120,80,0,0.32)",
+                                    "success": "rgba(40,90,60,0.32)",
+                                    "neutral": "rgba(140,120,120,0.32)",
+                                    "info": "rgba(30,90,140,0.32)"
+                                }
+                            },
+                            "content": {
+                                "disabled": {
+                                    "primary": "rgba(255,60,60,0.32)",
+                                    "error": "rgba(255,140,140,0.32)",
+                                    "warning": "rgba(255,200,120,0.32)",
+                                    "success": "rgba(120,255,170,0.32)",
+                                    "neutral": "rgba(140,120,120,0.32)",
+                                    "info": "rgba(120,200,255,0.32)"
+                                },
+                                "mid": { "error": "rgba(0,0,0,1)" }
+                            }
+                        },
+                        "disabled": { "content": "rgba(0,0,0,0.24)" },
+                        "low": {
+                            "error": "rgba(140,0,20,0.32)",
+                            "warning": "rgba(120,80,0,0.32)",
+                            "success": "rgba(40,90,60,0.32)",
+                            "info": "rgba(30,90,140,0.32)"
+                        }
+                    },
+                    "content": {
+                        "text": {
+                            "high": "rgba(18,12,12,1)",
+                            "mid": "rgba(0,0,0,0.64)",
+                            "low": "rgba(0,0,0,0.32)",
+                            "disabled": "rgba(0,0,0,0.24)",
+                            "emphasized": "rgba(120,0,0,1)",
+                            "link": "rgba(120,0,0,1)",
+                            "onPrimary": "rgba(255,200,200,1)",
+                            "danger": "rgba(140,0,20,1)",
+                            "success": "rgba(40,90,60,1)",
+                            "warning": "rgba(120,80,0,1)",
+                            "info": "rgba(30,90,140,1)",
+                            "disabledWhite": "rgba(255,255,255,0.32)",
+                            "dangerLow": "rgba(140,0,20,0.32)",
+                            "warningLow": "rgba(120,80,0,0.32)",
+                            "successLow": "rgba(40,90,60,0.32)",
+                            "infoLow": "rgba(30,90,140,0.32)"
+                        },
+                        "icon": {
+                            "default": "rgba(140,120,120,1)",
+                            "emphasized": "rgba(120,0,0,1)",
+                            "disabled": "rgba(0,0,0,0.24)",
+                            "onPrimary": "rgba(255,200,200,1)",
+                            "danger": "rgba(140,0,20,1)",
+                            "success": "rgba(40,90,60,1)",
+                            "warning": "rgba(120,80,0,1)",
+                            "info": "rgba(30,90,140,1)",
+                            "low": "rgba(0,0,0,0.32)",
+                            "mid": "rgba(0,0,0,0.64)",
+                            "high": "rgba(18,12,12,1)",
+                            "disabledWhite": "rgba(255,255,255,0.32)"
+                        },
+                        "container": {
+                            "default": "rgba(240,240,240,1)",
+                            "subtle": "rgba(220,220,220,1)",
+                            "emphasized": "rgba(255,60,60,1)",
+                            "selected": "rgba(255,60,60,1)",
+                            "mid": "rgba(225, 220, 220, 1)",
+                            "inverse": "rgba(255,200,200,1)",
+                            "overlay": "rgba(0,0,0,0.5)",
+                            "danger": "rgba(255,200,200,1)",
+                            "success": "rgba(210,255,220,1)",
+                            "warning": "rgba(255,240,210,1)",
+                            "info": "rgba(210,240,255,1)",
+                            "primary": "rgba(120,0,0,1)"
+                        },
+                        "border": {
+                            "default": "rgba(140,120,120,1)",
+                            "subtle": "rgba(220,220,220,1)",
+                            "emphasized": "rgba(120,0,0,1)",
+                            "danger": "rgba(140,0,20,1)",
+                            "success": "rgba(40,90,60,1)",
+                            "disabled": "rgba(0,0,0,0.24)",
+                            "warning": "rgba(120,80,0,1)",
+                            "info": "rgba(30,90,140,1)"
+                        }
+                    },
+                    "project": {
+                        "moon": "#FF4D4D",
+                        "sun": "#FFFFFF"
                     }
                 }
             }