Skip to content

Commit b5b6d45

Browse files
dgaponovdgaponov
authored
fix: import theme with utility colors (#439)
1 parent 1101f16 commit b5b6d45

File tree

8 files changed

+64
-43
lines changed

8 files changed

+64
-43
lines changed

‎package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"@gravity-ui/navigation": "^3.6.4",
1616
"@gravity-ui/page-constructor": "^6.0.0-beta.6",
1717
"@gravity-ui/uikit": "^7.20.0",
18-
"@gravity-ui/uikit-themer": "^1.4.0",
18+
"@gravity-ui/uikit-themer": "^1.4.1",
1919
"@mdx-js/mdx": "^2.3.0",
2020
"@mdx-js/react": "^2.3.0",
2121
"@monaco-editor/react": "^4.6.0",

‎src/components/Themes/Themes.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,8 +83,6 @@ $block: '.#{variables.$ns}themes';
8383
}
8484

8585
&__header-action-buttons {
86-
padding-right: 40px;
87-
8886
&.desktop {
8987
display: block;
9088

‎src/components/Themes/Themes.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,9 @@ export const Themes = () => {
4747
const closeExportDialog = React.useCallback(() => {
4848
setIsExportDialogVisible(false);
4949
}, []);
50+
const openImportDialog = React.useCallback(() => {
51+
setIsImportDialogVisible(true);
52+
}, []);
5053
const closeImportDialog = React.useCallback(() => {
5154
setIsImportDialogVisible(false);
5255
}, []);
@@ -104,6 +107,14 @@ export const Themes = () => {
104107
const ThemeActionsButtons = useCallback(
105108
() => (
106109
<Flex direction="row" gap={2}>
110+
<Button
111+
className={b('theme-action-btn')}
112+
view="outlined-action"
113+
size="xl"
114+
onClick={openImportDialog}
115+
>
116+
<Text>{t('btn_import_theme')}</Text>
117+
</Button>
107118
<Button
108119
className={b('theme-action-btn')}
109120
view="action"

‎src/components/Themes/hooks/useThemeUtilityColor.ts‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,23 @@ import {useThemeCreator, useThemeCreatorMethods} from './useThemeCreator';
66
type UseThemeColorParams = {
77
name: UtilityColor;
88
theme: Theme;
9+
withoutRef?: boolean;
910
};
1011

11-
export const useThemeUtilityColor = ({name, theme}: UseThemeColorParams) => {
12+
export const useThemeUtilityColor = ({name, theme, withoutRef}: UseThemeColorParams) => {
1213
const themeState = useThemeCreator();
1314
const {changeUtilityColor} = useThemeCreatorMethods();
1415

15-
const value = React.useMemo(
16-
() => themeState.gravityTheme.utilityColors[name][theme].value,
17-
[themeState, name, theme],
18-
);
16+
const value = React.useMemo(() => {
17+
const colorFullValue = themeState.gravityTheme.utilityColors[name][theme];
18+
if (withoutRef) {
19+
return colorFullValue.value;
20+
}
21+
if (colorFullValue.ref) {
22+
return colorFullValue.ref;
23+
}
24+
return colorFullValue.value;
25+
}, [themeState, name, theme]);
1926

2027
const updateValue = React.useCallback(
2128
(newValue: string) => {

‎src/components/Themes/lib/constants.ts‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -12,22 +12,22 @@ export const THEME_BORDER_RADIUS_VARIABLE_PREFIX = '--g-border-radius';
1212
export const DEFAULT_NEW_COLOR_TITLE = 'New color';
1313

1414
export const DEFAULT_BRAND_COLORS = [
15-
'rgb(203,255,92)',
16-
'rgb(0,41,255)',
17-
'rgb(49,78,60)',
18-
'rgb(108,145,201)',
19-
'rgb(255,190,92)',
20-
'rgb(255,92,92)',
15+
'rgb(203 255 92)',
16+
'rgb(0 41 255)',
17+
'rgb(49 78 60)',
18+
'rgb(108 145 201)',
19+
'rgb(255 190 92)',
20+
'rgb(255 92 92)',
2121
] as const;
2222

2323
export const TEXT_CONTRAST_COLORS: Record<Theme, {white: string; black: string}> = {
2424
dark: {
25-
white: 'rgb(255, 255, 255)',
26-
black: 'rgba(0, 0, 0, 0.9)', // --g-color-private-black-900
25+
white: 'rgb(255 255 255)',
26+
black: 'rgba(0 0 0 / 0.9)', // --g-color-private-black-900
2727
},
2828
light: {
29-
white: 'rgb(255, 255, 255)',
30-
black: 'rgba(0, 0, 0, 0.85)', // --g-color-private-black-850
29+
white: 'rgb(255 255 255)',
30+
black: 'rgba(0 0 0 / 0.85)', // --g-color-private-black-850
3131
},
3232
};
3333

@@ -86,10 +86,10 @@ export const DEFAULT_COLORS: GravityTheme['utilityColors'] = {
8686
},
8787
'base-background': {
8888
light: {
89-
value: 'rgb(255,255,255)',
89+
value: 'rgb(255 255 255)',
9090
},
9191
dark: {
92-
value: 'rgb(34,29,34)',
92+
value: 'rgb(34 29 34)',
9393
},
9494
},
9595
'base-brand-hover': {
@@ -199,14 +199,14 @@ export type BrandPreset = {
199199

200200
export const BRAND_COLORS_PRESETS: BrandPreset[] = [
201201
{
202-
brandColor: 'rgb(203,255,92)',
202+
brandColor: 'rgb(203 255 92)',
203203
utilityColors: {
204204
'base-background': {
205205
light: {
206-
value: 'rgb(255,255,255)',
206+
value: 'rgb(255 255 255)',
207207
},
208208
dark: {
209-
value: 'rgb(34,29,34)',
209+
value: 'rgb(34 29 34)',
210210
},
211211
},
212212
'base-brand': {
@@ -308,14 +308,14 @@ export const BRAND_COLORS_PRESETS: BrandPreset[] = [
308308
},
309309
},
310310
{
311-
brandColor: 'rgb(0,41,255)',
311+
brandColor: 'rgb(0 41 255)',
312312
utilityColors: {
313313
'base-background': {
314314
light: {
315-
value: 'rgb(255,255,255)',
315+
value: 'rgb(255 255 255)',
316316
},
317317
dark: {
318-
value: 'rgb(34,29,34)',
318+
value: 'rgb(34 29 34)',
319319
},
320320
},
321321
'base-brand': {
@@ -417,14 +417,14 @@ export const BRAND_COLORS_PRESETS: BrandPreset[] = [
417417
},
418418
},
419419
{
420-
brandColor: 'rgb(49,78,60)',
420+
brandColor: 'rgb(49 78 60)',
421421
utilityColors: {
422422
'base-background': {
423423
light: {
424-
value: 'rgb(255,255,255)',
424+
value: 'rgb(255 255 255)',
425425
},
426426
dark: {
427-
value: 'rgb(34,29,34)',
427+
value: 'rgb(34 29 34)',
428428
},
429429
},
430430
'base-brand': {
@@ -526,14 +526,14 @@ export const BRAND_COLORS_PRESETS: BrandPreset[] = [
526526
},
527527
},
528528
{
529-
brandColor: 'rgb(108,145,201)',
529+
brandColor: 'rgb(108 145 201)',
530530
utilityColors: {
531531
'base-background': {
532532
light: {
533-
value: 'rgb(255,255,255)',
533+
value: 'rgb(255 255 255)',
534534
},
535535
dark: {
536-
value: 'rgb(34,29,34)',
536+
value: 'rgb(34 29 34)',
537537
},
538538
},
539539
'base-brand': {
@@ -635,14 +635,14 @@ export const BRAND_COLORS_PRESETS: BrandPreset[] = [
635635
},
636636
},
637637
{
638-
brandColor: 'rgb(255,190,92)',
638+
brandColor: 'rgb(255 190 92)',
639639
utilityColors: {
640640
'base-background': {
641641
light: {
642-
value: 'rgb(255,255,255)',
642+
value: 'rgb(255 255 255)',
643643
},
644644
dark: {
645-
value: 'rgb(34,29,34)',
645+
value: 'rgb(34 29 34)',
646646
},
647647
},
648648
'base-brand': {
@@ -744,14 +744,14 @@ export const BRAND_COLORS_PRESETS: BrandPreset[] = [
744744
},
745745
},
746746
{
747-
brandColor: 'rgb(255,92,92)',
747+
brandColor: 'rgb(255 92 92)',
748748
utilityColors: {
749749
'base-background': {
750750
light: {
751-
value: 'rgb(255,255,255)',
751+
value: 'rgb(255 255 255)',
752752
},
753753
dark: {
754-
value: 'rgb(34,29,34)',
754+
value: 'rgb(34 29 34)',
755755
},
756756
},
757757
'base-brand': {

‎src/components/Themes/ui/MainSettings/MainSettings.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ const ThemeUtilityColorEditor = React.memo(({name, theme}: ThemeUtilityColorEdit
3333
const [color, setColor] = useThemeUtilityColor({
3434
name,
3535
theme,
36+
withoutRef: name === 'base-background',
3637
});
3738

3839
return (

‎src/components/Themes/ui/ThemableSettings/ThemableCard.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,11 @@ export const ThemableCard: React.FC<ThemableCardProps> = ({
2727
showTitle = true,
2828
}) => {
2929
const {t} = useTranslation('themes');
30-
const [backgroundColor] = useThemeUtilityColor({name: 'base-background', theme});
30+
const [backgroundColor] = useThemeUtilityColor({
31+
name: 'base-background',
32+
theme,
33+
withoutRef: true,
34+
});
3135

3236
const renderRow = React.useCallback(
3337
(row: ThemableRow) => {

0 commit comments

Comments
 (0)