Skip to content

feat: add advance color settings in themer #520

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
bityutskiyAO wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

feat: add advance color settings in themer #520

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4a3d30a
feat: add advance settings for colors in themer page
bityutskiyAO Nov 5, 2025
7869a66
feat: add logic for disable recursive color selecting + refactoring
bityutskiyAO Nov 26, 2025
30d57ba
feat: update themer package, add recursive color select logic
bityutskiyAO Nov 27, 2025
b07f7d9
fix design review issues and fix color selector
bityutskiyAO Nov 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"@gravity-ui/navigation": "^3.8.0",
"@gravity-ui/page-constructor": "^6.0.0-beta.6",
"@gravity-ui/uikit": "^7.26.1",
"@gravity-ui/uikit-themer": "^1.4.1",
"@gravity-ui/uikit-themer": "^1.5.0",
"@mdx-js/mdx": "^2.3.0",
"@mdx-js/react": "^2.3.0",
"@monaco-editor/react": "^4.6.0",
Expand Down
171 changes: 169 additions & 2 deletions public/locales/en/themes.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -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"
}
Loading
Loading