feat: add advance settings for colors in themer page

Author: bityutskiyAO

package-lock.json

@@ -17,7 +17,7 @@
     "@gravity-ui/navigation": "^3.10.1",
     "@gravity-ui/page-constructor": "^6.0.0-beta.6",
     "@gravity-ui/uikit": "^7.26.2",
-    "@gravity-ui/uikit-themer": "^1.4.1",
+    "@gravity-ui/uikit-themer": "^1.6.1",
     "@mdx-js/mdx": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
     "@monaco-editor/react": "^4.6.0",

package.json

@@ -19,6 +19,33 @@
   "palette_colors_description": "Support Colors for various cases and <br /> states",
   "dark_theme": "Dark theme",
   "light_theme": "Light theme",
+  "theme_name_light": "Light",
+  "theme_name_dark": "Dark",
+  "title_advance-settings-table_title-variable": "Variable",
+  "title_advance-settings-table_title-color": "Color",
+  "title_advance-settings-table_title-light": "Light theme value",
+  "title_advance-settings-table_title-dark": "Dark theme value",
+  "title_advance-color-settings-group-base": "Base",
+  "title_advance-color-settings-group-basic": "Base",
+  "title_advance-color-settings-group-semantic": "Semantic",
+  "title_advance-color-settings-group-brand": "Brand",
+  "title_advance-color-settings-group-extra-color": "Extra color",
+  "title_advance-color-settings-group-always-dark": "Always Dark",
+  "title_advance-color-settings-group-always-light": "Always Light",
+  "title_advance-color-settings-group-main-inversion": "Main Inversion",
+  "title_advance-color-settings-group-light-semantic": "Light Semantic",
+  "title_advance-color-settings-group-medium-semantic": "Medium Semantic",
+  "title_advance-color-settings-group-heavy-semantic": "Heavy Semantic",
+  "title_advance-color-settings-group-floats": "Floats",
+  "title_advance-color-settings-group-general": "General",
+  "title_advance-color-settings-group-other": "Other",
+  "title_advance-color-settings-group-scroll": "Scroll",
+  "title_advance-color-settings-group-axes": "Axes",
+  "title_advance-color-settings-group-tooltips": "Tooltips",
+  "title_advance-color-settings-group-base-color": "Base Color",
+  "title_advance-color-settings-group-brand-palette": "Brand Palette",
+  "title_advance-color-settings-group-advanced-brand-palette": "Advanced Brand Palette",
+  "title_advance-color-settings-group-additional-colors": "Additional Colors",
   "advanced_brand_palette": "Advanced Brand Palette",
   "additional_colors": "Additional Colors",
   "component_preview": "Component preview",
@@ -41,6 +68,8 @@
   "button": "Button",
   "title_brand-colors": "Brand colors",
   "action_edit-theme": "Edit theme",
+  "action_learn-more": "Learn More",
+  "action_add-extra-color": "Add Extra Color",
   "title_brand-palette-foundations": "Brand Palette Foundations",
   "label_text-on-brand": "Text on Brand",
   "label_colors-to-generate-palette": "The colors to generate the palette",
@@ -80,5 +109,143 @@
   "action_hide-advanced-settings": "Hide Advanced Settings",
   "action_open-advanced-settings": "Advanced Settings",
   "label_link-to-font": "Link to font",
-  "title_typography-styles": "Typography Styles"
-}
+  "title_typography-styles": "Typography Styles",
+  "title_advance-color-settings-basic-palette": "Basic Palette",
+  "title_advance-color-settings-brand-summary": "Brand summary",
+  "title_advance-color-settings-texts": "Texts",
+  "title_advance-color-settings-backgrounds": "Backgrounds",
+  "title_advance-color-settings-lines": "Lines",
+  "title_advance-color-settings-effects": "Effects",
+  "title_advance-color-settings-misc": "Misc",
+  "text_utility-color_text-primary_description": "Primary text on the page. It is default for headers, paragraphs, buttons.",
+  "text_utility-color_text-complementary_description": "Complementary text on the page. Controls, notes, etc.",
+  "text_utility-color_text-secondary_description": "Secondary text on the page. Captions, definitions, nonessential information.",
+  "text_utility-color_text-hint_description": "Control hint.",
+  "text_utility-color_text-info_description": "Info text.",
+  "text_utility-color_text-info-heavy_description": "Info text with underlay.",
+  "text_utility-color_text-positive_description": "Positive text.",
+  "text_utility-color_text-positive-heavy_description": "Positive text with underlay.",
+  "text_utility-color_text-warning_description": "Warning text.",
+  "text_utility-color_text-warning-heavy_description": "Warning text with underlay.",
+  "text_utility-color_text-danger_description": "Danger text.",
+  "text_utility-color_text-danger-heavy_description": "Danger text with underlay.",
+  "text_utility-color_text-utility_description": "For emphasizing, without semantic.",
+  "text_utility-color_text-utility-heavy_description": "Utility text with underlay.",
+  "text_utility-color_text-misc_description": "For emphasizing, without semantic.",
+  "text_utility-color_text-misc-heavy_description": "Misc text with underlay.",
+  "text_utility-color_text-brand_description": "Brand text.",
+  "text_utility-color_text-brand-heavy_description": "Brand text with underlay.",
+  "text_utility-color_text-brand-contrast_description": "Brand text with high contrast.",
+  "text_utility-color_text-link_description": "Links.",
+  "text_utility-color_text-link-hover_description": "Hover for Link.",
+  "text_utility-color_text-link-visited_description": "Visited Link.",
+  "text_utility-color_text-link-visited-hover_description": "Hover for Visited Link.",
+  "text_utility-color_text-dark-primary_description": "Primary text over light background.",
+  "text_utility-color_text-dark-complementary_description": "Complementary text over light background.",
+  "text_utility-color_text-dark-secondary_description": "Secondary text over light background.",
+  "text_utility-color_text-dark-hint_description": "Minimal contrast.",
+  "text_utility-color_text-light-primary_description": "Primary text over dark background.",
+  "text_utility-color_text-light-complementary_description": "Complementary text over dark background.",
+  "text_utility-color_text-light-secondary_description": "Secondary text over dark background.",
+  "text_utility-color_text-light-hint_description": "Minimal contrast.",
+  "text_utility-color_text-inverted-primary_description": "Primary text.",
+  "text_utility-color_text-inverted-complementary_description": "Complementary text.",
+  "text_utility-color_text-inverted-secondary_description": "Secondary text.",
+  "text_utility-color_text-inverted-hint_description": "Minimal contrast.",
+  "text_utility-color_base-background_description": "Page's background.",
+  "text_utility-color_base-generic_description": "Generic gray base, buttons and other objects.",
+  "text_utility-color_base-generic-hover_description": "Hover for Generic.",
+  "text_utility-color_base-generic-medium_description": "Neutral blocks with medium contrast.",
+  "text_utility-color_base-generic-medium-hover_description": "Hover for Generic Medium.",
+  "text_utility-color_base-generic-accent_description": "Background for controls (checkbox, radio, etc.).",
+  "text_utility-color_base-generic-accent-disabled_description": "Disabled background for controls.",
+  "text_utility-color_base-generic-ultralight_description": "Background with minimal contrast. Not recommended to use.",
+  "text_utility-color_base-simple-hover_description": "Hover for transparent objects (works over light backgrounds).",
+  "text_utility-color_base-simple-hover-solid_description": "Hover for transparent objects (works over light backgrounds).",
+  "text_utility-color_base-brand_description": "Background for accented object.",
+  "text_utility-color_base-brand-hover_description": "Hover for Brand.",
+  "text_utility-color_base-selection_description": "Highlight selected objects in menus, calendars, etc.",
+  "text_utility-color_base-selection-hover_description": "Hover for Selection.",
+  "text_utility-color_base-info-light_description": "Info semantic background.",
+  "text_utility-color_base-info-light-hover_description": "Hover for Info.",
+  "text_utility-color_base-positive-light_description": "Positive semantic background.",
+  "text_utility-color_base-positive-light-hover_description": "Hover for Positive.",
+  "text_utility-color_base-warning-light_description": "Warning semantic background.",
+  "text_utility-color_base-warning-light-hover_description": "Hover for Warning.",
+  "text_utility-color_base-danger-light_description": "Negative semantic background.",
+  "text_utility-color_base-danger-light-hover_description": "Hover for Danger.",
+  "text_utility-color_base-utility-light_description": "Utility semantic background.",
+  "text_utility-color_base-utility-light-hover_description": "Hover for Utility.",
+  "text_utility-color_base-misc-light_description": "Uncategorized semantic background.",
+  "text_utility-color_base-misc-light-hover_description": "Hover for Misc.",
+  "text_utility-color_base-neutral-light_description": "Neutral semantic background.",
+  "text_utility-color_base-neutral-light-hover_description": "Hover for Neutral.",
+  "text_utility-color_base-info-medium_description": "Info semantic background, medium accent.",
+  "text_utility-color_base-info-medium-hover_description": "Hover for Info Medium.",
+  "text_utility-color_base-positive-medium_description": "Positive semantic background, medium accent.",
+  "text_utility-color_base-positive-medium-hover_description": "Hover for Positive Medium.",
+  "text_utility-color_base-warning-medium_description": "Warning semantic background, medium accent.",
+  "text_utility-color_base-warning-medium-hover_description": "Hover for Warning Medium.",
+  "text_utility-color_base-danger-medium_description": "Danger semantic background, medium accent.",
+  "text_utility-color_base-danger-medium-hover_description": "Hover for Danger Medium.",
+  "text_utility-color_base-utility-medium_description": "Utility semantic background, medium accent.",
+  "text_utility-color_base-utility-medium-hover_description": "Hover for Utility Medium.",
+  "text_utility-color_base-misc-medium_description": "Uncategorized semantic background, medium accent.",
+  "text_utility-color_base-misc-medium-hover_description": "Hover for Misc Medium.",
+  "text_utility-color_base-neutral-medium_description": "Neutral semantic background, medium accent.",
+  "text_utility-color_base-neutral-medium-hover_description": "Hover for Neutral Medium.",
+  "text_utility-color_base-info-heavy_description": "Info semantic background, strong accent.",
+  "text_utility-color_base-info-heavy-hover_description": "Hover for Info Heavy.",
+  "text_utility-color_base-positive-heavy_description": "Positive semantic background, strong accent.",
+  "text_utility-color_base-positive-heavy-hover_description": "Hover for Positive Heavy.",
+  "text_utility-color_base-warning-heavy_description": "Warning semantic background, strong accent.",
+  "text_utility-color_base-warning-heavy-hover_description": "Hover for Warning Heavy.",
+  "text_utility-color_base-danger-heavy_description": "Negative semantic background, strong accent.",
+  "text_utility-color_base-danger-heavy-hover_description": "Hover for Danger Heavy",
+  "text_utility-color_base-utility-heavy_description": "Utility semantic background, strong accent.",
+  "text_utility-color_base-utility-heavy-hover_description": "Hover for Utility Heavy.",
+  "text_utility-color_base-misc-heavy_description": "Uncategorized semantic background, strong accent.",
+  "text_utility-color_base-misc-heavy-hover_description": "Hover for Misc Heavy.",
+  "text_utility-color_base-neutral-heavy_description": "Neutral semantic background, strong accent.",
+  "text_utility-color_base-neutral-heavy-hover_description": "Hover for Neutral Heavy.",
+  "text_utility-color_base-light_description": "Background on top of another darker background.",
+  "text_utility-color_base-light-hover_description": "Hover for Light.",
+  "text_utility-color_base-light-simple-hover_description": "Hover for transparent objects (works over dark backgrounds).",
+  "text_utility-color_base-light-disabled_description": "Disabled controls.",
+  "text_utility-color_base-light-accent-disabled_description": "Disabled active controls.",
+  "text_utility-color_base-float_description": "Raised layers background.",
+  "text_utility-color_base-float-hover_description": "Hover for Float.",
+  "text_utility-color_base-float-medium_description": "Float for medium contrast.",
+  "text_utility-color_base-float-heavy_description": "Float for strong contrast.",
+  "text_utility-color_base-float-accent_description": "Raised controls.",
+  "text_utility-color_base-float-accent-hover_description": "Hover for Float Accent.",
+  "text_utility-color_base-float-announcement_description": "Float background for announcements.",
+  "text_utility-color_base-modal_description": "Floating components with a veil.",
+  "text_utility-color_line-generic_description": "Button borders, dividers, basic block borders. Almost all lines.",
+  "text_utility-color_line-generic-hover_description": "Hover for Generic.",
+  "text_utility-color_line-generic-active_description": "Active state for Generic.",
+  "text_utility-color_line-generic-accent_description": "Control borders.",
+  "text_utility-color_line-generic-accent-hover_description": "Hover for Generic Accent.",
+  "text_utility-color_line-generic-solid_description": "Generic without transparency (to avoid collision artefacts).",
+  "text_utility-color_line-brand_description": "Brand blocks",
+  "text_utility-color_line-focus_description": "Focused blocks",
+  "text_utility-color_line-info_description": "Info blocks.",
+  "text_utility-color_line-positive_description": "Positive blocks.",
+  "text_utility-color_line-warning_description": "Warning blocks.",
+  "text_utility-color_line-danger_description": "Danger blocks. Blocks with negative context.",
+  "text_utility-color_line-utility_description": "Utility blocks.",
+  "text_utility-color_line-misc_description": "Uncategorized blocks.",
+  "text_utility-color_line-light_description": "Dividers and borders over dark background.",
+  "text_utility-color_sfx-veil_description": "Popup backdrop.",
+  "text_utility-color_sfx-shadow_description": "Shadow for everything that might have it.",
+  "text_utility-color_sfx-shadow-light_description": "Lighter version of shadow.",
+  "text_utility-color_sfx-shadow-heavy_description": "Heavy shadows. DEPRECATED.",
+  "text_utility-color_sfx-fade_description": "Enlighten while loading.",
+  "text_utility-color_scroll-track_description": "Scroll background.",
+  "text_utility-color_scroll-handle_description": "The handle to move the scroll.",
+  "text_utility-color_scroll-handle-hover_description": "Hover state for scroll handle.",
+  "text_utility-color_scroll-corner_description": "A corner where horizontal and vertical scrolls meet.",
+  "text_utility-color_infographics-axis_description": "Graph axis",
+  "text_utility-color_infographics-tooltip-bg_description": "Main background for tooltips.",
+  "text_utility-color_disabled_description": "Disabled: recursive color reference detected"
+}