Skip to content

Commit 8c0def6

Browse files
bityutskiyAObityutskiyAO
committed
feat: update themer lib; add new private colors; fix styles
1 parent b07f7d9 commit 8c0def6

File tree

9 files changed

+70
-97
lines changed

9 files changed

+70
-97
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
@@ -17,7 +17,7 @@
1717
"@gravity-ui/navigation": "^3.8.0",
1818
"@gravity-ui/page-constructor": "^6.0.0-beta.6",
1919
"@gravity-ui/uikit": "^7.26.1",
20-
"@gravity-ui/uikit-themer": "^1.5.0",
20+
"@gravity-ui/uikit-themer": "^1.6.1",
2121
"@mdx-js/mdx": "^2.3.0",
2222
"@mdx-js/react": "^2.3.0",
2323
"@monaco-editor/react": "^4.6.0",

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

Lines changed: 9 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type {BordersOptions, GravityTheme, Theme} from '@gravity-ui/uikit-themer';
1+
import type {BordersOptions, GravityTheme} from '@gravity-ui/uikit-themer';
22
import {
33
DEFAULT_THEME as DEFAULT_GRAVITY_THEME,
44
createInternalPrivateColorReference,
@@ -22,17 +22,6 @@ export const DEFAULT_BRAND_COLORS = [
2222
'rgb(255 92 92)',
2323
] as const;
2424

25-
export const TEXT_CONTRAST_COLORS: Record<Theme, {white: string; black: string}> = {
26-
dark: {
27-
white: 'rgb(255 255 255)',
28-
black: 'rgba(0 0 0 / 0.9)', // --g-color-private-black-900
29-
},
30-
light: {
31-
white: 'rgb(255 255 255)',
32-
black: 'rgba(0 0 0 / 0.85)', // --g-color-private-black-850
33-
},
34-
};
35-
3625
export const DEFAULT_PALETTE: GravityTheme['baseColors'] = {
3726
...DEFAULT_GRAVITY_THEME.baseColors,
3827
brand: {
@@ -348,14 +337,6 @@ export const DEFAULT_COLORS: GravityTheme['utilityColors'] = {
348337
value: createInternalPrivateColorReference('brand', '700-solid'),
349338
},
350339
},
351-
'text-brand-contrast': {
352-
light: {
353-
value: TEXT_CONTRAST_COLORS.light.black,
354-
},
355-
dark: {
356-
value: TEXT_CONTRAST_COLORS.dark.black,
357-
},
358-
},
359340
'text-link': {
360341
light: {
361342
value: createInternalPrivateColorReference('brand', '600-solid'),
@@ -473,14 +454,6 @@ export const BRAND_COLORS_PRESETS: BrandPreset[] = [
473454
value: createInternalPrivateColorReference('brand', '700-solid'),
474455
},
475456
},
476-
'text-brand-contrast': {
477-
light: {
478-
value: TEXT_CONTRAST_COLORS.light.black,
479-
},
480-
dark: {
481-
value: TEXT_CONTRAST_COLORS.dark.black,
482-
},
483-
},
484457
'text-link': {
485458
light: {
486459
value: createInternalPrivateColorReference('brand', '600-solid'),
@@ -582,14 +555,6 @@ export const BRAND_COLORS_PRESETS: BrandPreset[] = [
582555
value: createInternalPrivateColorReference('brand', '700-solid'),
583556
},
584557
},
585-
'text-brand-contrast': {
586-
light: {
587-
value: TEXT_CONTRAST_COLORS.light.white,
588-
},
589-
dark: {
590-
value: TEXT_CONTRAST_COLORS.dark.white,
591-
},
592-
},
593558
'text-link': {
594559
light: {
595560
value: createInternalPrivateColorReference('brand', '600-solid'),
@@ -691,14 +656,6 @@ export const BRAND_COLORS_PRESETS: BrandPreset[] = [
691656
value: createInternalPrivateColorReference('brand', '700-solid'),
692657
},
693658
},
694-
'text-brand-contrast': {
695-
light: {
696-
value: TEXT_CONTRAST_COLORS.light.white,
697-
},
698-
dark: {
699-
value: TEXT_CONTRAST_COLORS.dark.white,
700-
},
701-
},
702659
'text-link': {
703660
light: {
704661
value: createInternalPrivateColorReference('brand', '600-solid'),
@@ -800,14 +757,14 @@ export const BRAND_COLORS_PRESETS: BrandPreset[] = [
800757
value: createInternalPrivateColorReference('brand', '700-solid'),
801758
},
802759
},
803-
'text-brand-contrast': {
804-
light: {
805-
value: TEXT_CONTRAST_COLORS.light.white,
806-
},
807-
dark: {
808-
value: TEXT_CONTRAST_COLORS.dark.white,
809-
},
810-
},
760+
// 'text-brand-contrast': {
761+
// light: {
762+
// value: TEXT_CONTRAST_COLORS.light.white,
763+
// },
764+
// dark: {
765+
// value: TEXT_CONTRAST_COLORS.dark.white,
766+
// },
767+
// },
811768
'text-link': {
812769
light: {
813770
value: createInternalPrivateColorReference('brand', '600-solid'),
@@ -909,14 +866,6 @@ export const BRAND_COLORS_PRESETS: BrandPreset[] = [
909866
value: createInternalPrivateColorReference('brand', '700-solid'),
910867
},
911868
},
912-
'text-brand-contrast': {
913-
light: {
914-
value: TEXT_CONTRAST_COLORS.light.black,
915-
},
916-
dark: {
917-
value: TEXT_CONTRAST_COLORS.dark.black,
918-
},
919-
},
920869
'text-link': {
921870
light: {
922871
value: createInternalPrivateColorReference('brand', '600-solid'),
@@ -1018,14 +967,6 @@ export const BRAND_COLORS_PRESETS: BrandPreset[] = [
1018967
value: createInternalPrivateColorReference('brand', '700-solid'),
1019968
},
1020969
},
1021-
'text-brand-contrast': {
1022-
light: {
1023-
value: TEXT_CONTRAST_COLORS.light.white,
1024-
},
1025-
dark: {
1026-
value: TEXT_CONTRAST_COLORS.dark.white,
1027-
},
1028-
},
1029970
'text-link': {
1030971
light: {
1031972
value: createInternalPrivateColorReference('brand', '600-solid'),

‎src/components/Themes/ui/AdvancedSettingsTable/columns.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,15 +33,13 @@ const PaletteThemeValueColumn = ({colorName, theme, value}: ColumnProps) => {
3333
value={color.value}
3434
defaultValue={value ?? '#000000'}
3535
onChange={setColor}
36+
size="s"
3637
view="clear"
3738
/>
3839
);
3940
};
4041

41-
const utilityColorsForDefaultColorPicker: UtilityColor[] = [
42-
'base-background',
43-
'text-brand-contrast',
44-
];
42+
const utilityColorsForDefaultColorPicker: UtilityColor[] = ['base-background'];
4543

4644
const UtilityThemeValueColumn = ({
4745
colorName,
@@ -65,6 +63,7 @@ const UtilityThemeValueColumn = ({
6563
value={color}
6664
defaultValue={value ?? '#000000'}
6765
onChange={setColor}
66+
size="s"
6867
view="clear"
6968
/>
7069
);
@@ -77,7 +76,8 @@ const UtilityThemeValueColumn = ({
7776
defaultValue={value ?? '#000000'}
7877
value={color}
7978
onChange={setColor}
80-
inputView="clear"
79+
inputProps={{view: 'clear', size: 's'}}
80+
buttonProps={{size: 's'}}
8181
/>
8282
);
8383
};

‎src/components/Themes/ui/AdvancedSettingsTable/hooks.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export const useColumns = ({colorType}: {colorType: AdvancedColorType}): Column[
5656
<VariableColumn name={colorName} extraVariable={extraVariable} />
5757
),
5858
}),
59-
[t],
59+
[t, colorType],
6060
);
6161

6262
const tabletColumns: Column[] = useMemo(
@@ -74,7 +74,7 @@ export const useColumns = ({colorType}: {colorType: AdvancedColorType}): Column[
7474
),
7575
},
7676
],
77-
[variableColumn, theme],
77+
[variableColumn, toggleTheme, theme],
7878
);
7979

8080
const desktopColumns: Column[] = useMemo(

‎src/components/Themes/ui/ColorPreview/ColorPreview.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,4 +32,8 @@ $block: '.#{variables.$ns}color-preview';
3232
background: var(--opacity-pattern);
3333
}
3434
}
35+
36+
&_with-borders {
37+
border: 1px solid var(--g-color-line-generic);
38+
}
3539
}

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,21 @@ import './ColorPreview.scss';
77
export interface ColorPreviewProps {
88
color?: string;
99
className?: string;
10+
withBorders?: boolean;
1011
}
1112

1213
const b = block('color-preview');
1314

1415
const isColorWithOpacity = (color?: string) => !color || color?.startsWith('rgba');
1516

16-
export const ColorPreview = ({color, className}: ColorPreviewProps) => {
17+
export const ColorPreview = ({color, className, withBorders}: ColorPreviewProps) => {
1718
return (
18-
<div className={b({'with-opacity': isColorWithOpacity(color)}, className)}>
19+
<div
20+
className={b(
21+
{'with-opacity': isColorWithOpacity(color), 'with-borders': withBorders},
22+
className,
23+
)}
24+
>
1925
<div className={b('color')} style={{backgroundColor: color}} />
2026
</div>
2127
);

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

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {ChevronDown, PencilToLine} from '@gravity-ui/icons';
22
import {
33
Button,
4+
type ButtonProps,
45
Flex,
56
Icon,
67
Popup,
@@ -34,7 +35,8 @@ interface GravityColorSelectProps {
3435
onChange: (color: string, ref?: string) => void;
3536
privateGroups: ColorGroup[];
3637
semanticGroups?: SemanticColorGroup[];
37-
inputView?: TextInputProps['view'];
38+
inputProps?: Pick<TextInputProps, 'size' | 'view'>;
39+
buttonProps?: Pick<ButtonProps, 'size'>;
3840
}
3941

4042
export const GravityColorSelect = ({
@@ -43,7 +45,8 @@ export const GravityColorSelect = ({
4345
value,
4446
defaultValue,
4547
onChange,
46-
inputView = 'normal',
48+
inputProps,
49+
buttonProps,
4750
}: GravityColorSelectProps) => {
4851
const isMobile = useIsMobile();
4952

@@ -117,18 +120,23 @@ export const GravityColorSelect = ({
117120
{isCustomValue ? (
118121
<ColorPickerInput
119122
value={value}
123+
size={inputProps?.size}
120124
defaultValue={value || ''}
121125
onChange={onChange}
122-
view={inputView}
126+
view={inputProps?.view}
123127
/>
124128
) : (
125129
<TextInput
126130
className={b('input')}
127131
value={selectedColor?.title || ''}
128-
view={inputView}
129-
size="l"
132+
view={inputProps?.view}
133+
size={inputProps?.size ?? 'l'}
130134
startContent={
131-
<ColorPreview className={b('preview')} color={selectedColor?.color} />
135+
<ColorPreview
136+
className={b('preview')}
137+
color={selectedColor?.color}
138+
withBorders
139+
/>
132140
}
133141
endContent={
134142
<Flex gap={1}>
@@ -149,7 +157,7 @@ export const GravityColorSelect = ({
149157
)}
150158
<Button
151159
className={b('customize-button')}
152-
size="l"
160+
size={buttonProps?.size ?? 'l'}
153161
view="flat"
154162
onClick={switchMode}
155163
selected={isCustomValue}

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

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import {Sliders} from '@gravity-ui/icons';
22
import {Button, Flex, Icon, Text} from '@gravity-ui/uikit';
3-
import type {Theme, UtilityColor} from '@gravity-ui/uikit-themer';
3+
import {DEFAULT_THEME, type Theme, type UtilityColor} from '@gravity-ui/uikit-themer';
44
import {useTranslation} from 'next-i18next';
55
import React from 'react';
66

77
import {block} from '../../../../utils';
88
import {SelectableCard} from '../../../SelectableCard/SelectableCard';
99
import {useThemePaletteColor, useThemeUtilityColor} from '../../hooks';
10-
import {TEXT_CONTRAST_COLORS} from '../../lib/constants';
1110
import {ColorPickerInput} from '../ColorPickerInput/ColorPickerInput';
1211
import {ThemableSettings} from '../ThemableSettings/ThemableSettings';
1312
import {ThemableRow} from '../ThemableSettings/types';
@@ -62,6 +61,11 @@ const BrandColorEditor: React.FC<{theme: Theme}> = ({theme}) => {
6261
);
6362
};
6463

64+
const textBrandContrastDefaults = {
65+
light: DEFAULT_THEME.utilityColors['text-brand-contrast'].light,
66+
dark: DEFAULT_THEME.utilityColors['text-brand-contrast'].dark,
67+
};
68+
6569
const TextContrastColorEditor: React.FC<{theme: Theme}> = ({theme}) => {
6670
const [brandTextColor, setBrandTextColor] = useThemeUtilityColor({
6771
name: 'text-brand-contrast',
@@ -75,25 +79,35 @@ const TextContrastColorEditor: React.FC<{theme: Theme}> = ({theme}) => {
7579
<SelectableCard
7680
className={b('text-card')}
7781
text="Black text"
78-
selected={brandTextColor === TEXT_CONTRAST_COLORS[theme].black}
79-
onClick={() => setBrandTextColor(TEXT_CONTRAST_COLORS[theme].black)}
82+
selected={brandTextColor === textBrandContrastDefaults.light.ref}
83+
onClick={() =>
84+
setBrandTextColor(
85+
textBrandContrastDefaults.light.value,
86+
textBrandContrastDefaults.light.ref,
87+
)
88+
}
8089
textProps={{
8190
style: {
8291
...BASE_CARD_BUTTON_STYLES,
83-
color: TEXT_CONTRAST_COLORS[theme].black,
92+
color: textBrandContrastDefaults.light.value,
8493
backgroundColor: brandColor.value,
8594
},
8695
}}
8796
/>
8897
<SelectableCard
8998
className={b('text-card')}
9099
text="White text"
91-
selected={brandTextColor === TEXT_CONTRAST_COLORS[theme].white}
92-
onClick={() => setBrandTextColor(TEXT_CONTRAST_COLORS[theme].white)}
100+
selected={brandTextColor === textBrandContrastDefaults.dark.ref}
101+
onClick={() =>
102+
setBrandTextColor(
103+
textBrandContrastDefaults.dark.value,
104+
textBrandContrastDefaults.dark.ref,
105+
)
106+
}
93107
textProps={{
94108
style: {
95109
...BASE_CARD_BUTTON_STYLES,
96-
color: TEXT_CONTRAST_COLORS[theme].white,
110+
color: textBrandContrastDefaults.dark.value,
97111
backgroundColor: brandColor.value,
98112
},
99113
}}

0 commit comments

Comments
 (0)