Skip to content

Remove legacy colors #1690

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
SAnatoliiS wants to merge 18 commits into
base: development
Choose a base branch
from
Draft

Remove legacy colors #1690

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
dc5ecac
Remove legacy colors.
SAnatoliiS Nov 2, 2022
b0f30b9
Replace color TextPrimaryInverted with TextInverted.
SAnatoliiS Nov 2, 2022
f4a7ec7
Replace color TextNeutral with TextSecondary.
SAnatoliiS Nov 2, 2022
8eb4117
Replace color TextOverlay with TextSecondary.
SAnatoliiS Nov 2, 2022
70375d1
Replace color TextOverlayInverted with TextTertiary.
SAnatoliiS Nov 2, 2022
ad631cf
Replace color BackgroundPrimaryInverted with BackgroundInverted.
SAnatoliiS Nov 2, 2022
3c971e9
Replace color BackgroundTertiaryInverted with BackgroundTertiary.
SAnatoliiS Nov 2, 2022
4a46cd0
Replace color LinePrimary with BackgroundPrimary.
SAnatoliiS Nov 2, 2022
887e650
Replace color LineSecondary with BackgroundSecondary.
SAnatoliiS Nov 2, 2022
2d76a2d
Replace color LineTertiary with BackgroundTertiary.
SAnatoliiS Nov 2, 2022
a0c924b
Replace color LineNeutral with BackgroundInverted.
SAnatoliiS Nov 2, 2022
ac8b104
Replace color LineAccent with BackgroundAccent.
SAnatoliiS Nov 2, 2022
175a0b8
Replace color LineNegative with BackgroundNegative.
SAnatoliiS Nov 2, 2022
a4b13aa
Replace color LinePositive with BackgroundPositive.
SAnatoliiS Nov 2, 2022
6d6ad3b
Replace color IconSecondary with TextSecondary.
SAnatoliiS Nov 2, 2022
bbf9eab
Replace color IconNeutral with TextTertiary.
SAnatoliiS Nov 2, 2022
a217ca7
Replace color LineOverlayLight with BackgroundTertiary.
SAnatoliiS Nov 2, 2022
c775d6f
Remove legacy colors.
SAnatoliiS Nov 3, 2022
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
2 changes: 1 addition & 1 deletion Example/src/components/ExampleSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export function ExampleSection({ title, children }: { title: string; children: R
marginHorizontal: '2%',
marginTop: 20,
borderBottomWidth: 1,
borderBottomColor: theme[ColorVariants.LineNeutral],
borderBottomColor: theme[ColorVariants.BackgroundInverted],
}}
>
<UILabel>{title}</UILabel>
Expand Down
6 changes: 3 additions & 3 deletions Example/src/screens/Inputs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ export const Inputs = () => {
>
<UIMaterialTextView.Icon
source={UIAssets.icons.ui.buttonClose}
tintColor={ColorVariants.IconSecondary}
tintColor={ColorVariants.TextSecondary}
/>
</UIMaterialTextView>
<View style={{ height: 20 }} />
Expand All @@ -131,11 +131,11 @@ export const Inputs = () => {
>
<UIMaterialTextView.Icon
source={UIAssets.icons.ui.buttonPlus}
tintColor={ColorVariants.IconSecondary}
tintColor={ColorVariants.TextSecondary}
/>
<UIMaterialTextView.Icon
source={UIAssets.icons.ui.buttonClose}
tintColor={ColorVariants.IconSecondary}
tintColor={ColorVariants.TextSecondary}
/>
</UIMaterialTextView>
<View style={{ height: 20 }} />
Expand Down
2 changes: 1 addition & 1 deletion Example/src/screens/LargeHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ const renderBelowContent = () => {
marginVertical: 8,
}}
>
<UILabel color={UILabelColors.TextPrimaryInverted}>
<UILabel color={UILabelColors.TextInverted}>
A thing happened and it takes three whole lines to explain that it happened. This
isn’t likely in English but maybe in German. A thing happened and it takes three
whole lines to explain that it happened. This isn’t likely in English but maybe in
Expand Down
7 changes: 2 additions & 5 deletions Example/src/screens/Lists.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,10 +71,7 @@ const Footer = React.memo(() => {
justifyContent: 'center',
}}
>
<UILabel
role={TypographyVariants.HeadersHuge}
color={ColorVariants.TextPrimaryInverted}
>
<UILabel role={TypographyVariants.HeadersHuge} color={ColorVariants.TextInverted}>
Loading...
</UILabel>
</View>
Expand Down Expand Up @@ -112,7 +109,7 @@ function MasonryList() {
>
<UILabel
role={TypographyVariants.HeadersHuge}
color={ColorVariants.TextPrimaryInverted}
color={ColorVariants.TextInverted}
>
{item.index}
</UILabel>
Expand Down
32 changes: 16 additions & 16 deletions Example/src/screens/Navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,7 @@ export const Navigation = () => {
icon: {
source: UIAssets.icons.ui.camera,
},
iconTintColor: ColorVariants.IconSecondary,
iconTintColor: ColorVariants.TextSecondary,
},
{
icon: {
Expand All @@ -279,27 +279,27 @@ export const Navigation = () => {
width: 25,
},
},
iconTintColor: ColorVariants.IconSecondary,
iconTintColor: ColorVariants.TextSecondary,
},
{
icon: {
source: UIAssets.icons.ui.glass,
},
iconTintColor: ColorVariants.IconSecondary,
iconTintColor: ColorVariants.TextSecondary,
},
{
icon: {
source: UIAssets.icons.ui.triangle,
},
iconTintColor: ColorVariants.IconSecondary,
iconTintColor: ColorVariants.TextSecondary,
},
]}
headerRightItems={[
{
icon: {
source: UIAssets.icons.ui.camera,
},
iconTintColor: ColorVariants.IconSecondary,
iconTintColor: ColorVariants.TextSecondary,
},
{
icon: {
Expand All @@ -308,19 +308,19 @@ export const Navigation = () => {
width: 25,
},
},
iconTintColor: ColorVariants.IconSecondary,
iconTintColor: ColorVariants.TextSecondary,
},
{
icon: {
source: UIAssets.icons.ui.glass,
},
iconTintColor: ColorVariants.IconSecondary,
iconTintColor: ColorVariants.TextSecondary,
},
{
icon: {
source: UIAssets.icons.ui.triangle,
},
iconTintColor: ColorVariants.IconSecondary,
iconTintColor: ColorVariants.TextSecondary,
},
]}
/>
Expand Down Expand Up @@ -408,7 +408,7 @@ export const Navigation = () => {
icon: {
source: UIAssets.icons.ui.camera,
},
iconTintColor: ColorVariants.IconSecondary,
iconTintColor: ColorVariants.TextSecondary,
},
{
icon: {
Expand All @@ -417,27 +417,27 @@ export const Navigation = () => {
width: 25,
},
},
iconTintColor: ColorVariants.IconSecondary,
iconTintColor: ColorVariants.TextSecondary,
},
{
icon: {
source: UIAssets.icons.ui.glass,
},
iconTintColor: ColorVariants.IconSecondary,
iconTintColor: ColorVariants.TextSecondary,
},
{
icon: {
source: UIAssets.icons.ui.triangle,
},
iconTintColor: ColorVariants.IconSecondary,
iconTintColor: ColorVariants.TextSecondary,
},
]}
headerRightItems={[
{
icon: {
source: UIAssets.icons.ui.camera,
},
iconTintColor: ColorVariants.IconSecondary,
iconTintColor: ColorVariants.TextSecondary,
},
{
icon: {
Expand All @@ -446,19 +446,19 @@ export const Navigation = () => {
width: 25,
},
},
iconTintColor: ColorVariants.IconSecondary,
iconTintColor: ColorVariants.TextSecondary,
},
{
icon: {
source: UIAssets.icons.ui.glass,
},
iconTintColor: ColorVariants.IconSecondary,
iconTintColor: ColorVariants.TextSecondary,
},
{
icon: {
source: UIAssets.icons.ui.triangle,
},
iconTintColor: ColorVariants.IconSecondary,
iconTintColor: ColorVariants.TextSecondary,
},
]}
/>
Expand Down
2 changes: 1 addition & 1 deletion casts/addressText/src/UIAddressTextView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ export const UIAddressTextView = React.forwardRef<UIMaterialTextViewRef, UIAddre
onPress={() => {
setQrVisible(prevQRVisible => !prevQRVisible);
}}
tintColor={ColorVariants.LineNeutral}
tintColor={ColorVariants.BackgroundInverted}
/>
);
}, [qrCode]);
Expand Down
2 changes: 1 addition & 1 deletion casts/banner/src/UIBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export function UIBanner(props: Props) {
>
<UILabel
role={UILabelRoles.ActionCallout}
color={textColor || UILabelColors.TextPrimaryInverted}
color={textColor || UILabelColors.TextInverted}
>
{text}
</UILabel>
Expand Down
4 changes: 2 additions & 2 deletions casts/bars/src/UIHeaderItems.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ function UIHeaderActionItem({ disabled, label, accessibilityLabel }: HeaderItem)
return (
<UILabel
role={UILabelRoles.Action}
color={disabled ? UILabelColors.TextNeutral : UILabelColors.TextAccent}
color={disabled ? UILabelColors.TextSecondary : UILabelColors.TextAccent}
accessibilityLabel={accessibilityLabel}
>
{label}
Expand All @@ -73,7 +73,7 @@ function UIHeaderIconItem({
return iconElement;
}

const tintColor = disabled ? ColorVariants.IconNeutral : iconTintColor;
const tintColor = disabled ? ColorVariants.TextTertiary : iconTintColor;

if (icon) {
if (typeof icon === 'function') {
Expand Down
2 changes: 1 addition & 1 deletion casts/bars/src/UISearchBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ export function UISearchBar({
<UIImage
source={UIAssets.icons.ui.search}
style={styles.searchIcon}
tintColor={ColorVariants.IconSecondary}
tintColor={ColorVariants.TextSecondary}
/>
<UITextView
ref={ref}
Expand Down
2 changes: 1 addition & 1 deletion casts/bars/src/UISearchBarButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export function UISearchBarButton({
<UIImage
source={UIAssets.icons.ui.search}
style={styles.searchIcon}
tintColor={ColorVariants.IconSecondary}
tintColor={ColorVariants.TextSecondary}
/>
<UILabel
role={UILabelRoles.ParagraphText}
Expand Down
2 changes: 1 addition & 1 deletion casts/countryPicker/src/UICountryPicker/CountryPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,7 +232,7 @@ const useStyles = makeStyles((theme: Theme) => ({
},
headerContainer: {
backgroundColor: theme[ColorVariants.BackgroundPrimary] as string,
borderBottomColor: theme[ColorVariants.LineTertiary] as string,
borderBottomColor: theme[ColorVariants.BackgroundTertiary] as string,
borderBottomWidth: 1,
borderTopLeftRadius: 12,
borderTopRightRadius: 12,
Expand Down
2 changes: 1 addition & 1 deletion casts/countryPicker/src/UICountryPicker/CountryPickerRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const useStyles = makeStyles((theme: Theme) => ({
rowContainerInner: {
paddingVertical: UILayoutConstant.contentOffset,
flexDirection: 'row',
borderBottomColor: theme[ColorVariants.LineTertiary] as string,
borderBottomColor: theme[ColorVariants.BackgroundTertiary] as string,
borderBottomWidth: 1,
},
rowContainer: {
Expand Down
2 changes: 1 addition & 1 deletion casts/dateTimePicker/src/UIDateTimePicker/Calendar/DateControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ const useStyles = makeStyles((theme: Theme) => ({
separator: {
height: 12,
width: 1,
backgroundColor: theme[ColorVariants.BackgroundTertiaryInverted],
backgroundColor: theme[ColorVariants.BackgroundTertiary],
marginHorizontal: UILayoutConstant.normalContentOffset,
},
arrows: {
Expand Down
5 changes: 4 additions & 1 deletion casts/dateTimePicker/src/UIDateTimePicker/DateTimePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,10 @@ function Content() {
return (
<>
<Calendar />
<UIBackgroundView color={ColorVariants.LineTertiary} style={styles.divider} />
<UIBackgroundView
color={ColorVariants.BackgroundTertiary}
style={styles.divider}
/>
<Time />
</>
);
Expand Down
2 changes: 1 addition & 1 deletion casts/dateTimePicker/src/UIDateTimePicker/Time/Time.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const TimeInput = React.forwardRef<UITextViewRef, TimeInputProps>(function TimeI
[TIME_INPUT_IS_NOT_IN_FOCUS, TIME_INPUT_IS_IN_FOCUS],
[
theme[ColorVariants.BackgroundTertiary] as string,
theme[ColorVariants.LineAccent] as string,
theme[ColorVariants.BackgroundAccent] as string,
],
),
backgroundColor: theme[ColorVariants.BackgroundTertiary],
Expand Down
2 changes: 1 addition & 1 deletion casts/linearChart/src/Linear/LinearChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ export const LinearChart: React.FC<IProps> = ({ data, testID }: IProps) => {
animatedProps={animatedPathProps}
fill="transparent"
// @ts-ignore
stroke={theme[ColorVariants.LineAccent]}
stroke={theme[ColorVariants.BackgroundAccent]}
strokeWidth={LINEAR_CHART_STROKE_WIDTH}
/>
</AnimatedSvg>
Expand Down
2 changes: 1 addition & 1 deletion casts/pagerView/src/UIPagerView/UIPagerViewContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -307,7 +307,7 @@ export const UIPagerViewContainer: React.FC<UIPagerViewContainerProps> = ({
const renderTabBar: TabBarComponent = useTabBar(
pages,
theme.TextPrimary,
theme.LinePrimary,
theme.BackgroundPrimary,
type,
);

Expand Down
2 changes: 1 addition & 1 deletion casts/qrCodeScannerSheet/src/QRCodeScanner/QRCodeScanner.native.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export function QRCodeScanner(props: React.ComponentProps<typeof QRCodeScannerNa
<View style={styles.errorContainer}>
<UILabel
role={UILabelRoles.TitleMedium}
color={UILabelColors.TextPrimaryInverted}
color={UILabelColors.TextInverted}
style={styles.errorText}
>
{uiLocalized.QRCodeScanner.ErrorPermissions}
Expand Down
4 changes: 2 additions & 2 deletions casts/qrCodeScannerSheet/src/QRCodeScanner/QRCodeScanner.web.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export function QRCodeScanner(props: QRCodeScannerProps) {
<View style={[styles.errorContainer, props.containerStyle]}>
<UILabel
role={UILabelRoles.TitleMedium}
color={UILabelColors.TextPrimaryInverted}
color={UILabelColors.TextInverted}
style={styles.errorText}
>
{uiLocalized.QRCodeScanner.ErrorPermissions}
Expand All @@ -70,7 +70,7 @@ export function QRCodeScanner(props: QRCodeScannerProps) {
<View style={[styles.errorContainer, props.containerStyle]}>
<UILabel
role={UILabelRoles.TitleMedium}
color={UILabelColors.TextPrimaryInverted}
color={UILabelColors.TextInverted}
style={styles.errorText}
>
{uiLocalized.QRCodeScanner.ErrorUnexpected}
Expand Down
2 changes: 1 addition & 1 deletion casts/rows/src/UIListRowsAdapter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export const UIListSeparator = React.memo(function UIListSeparator() {
<View
style={[
{
borderTopColor: theme[ColorVariants.LineOverlayLight],
borderTopColor: theme[ColorVariants.BackgroundTertiary],
},
styles.separator,
]}
Expand Down
4 changes: 1 addition & 3 deletions casts/splitNavigator/src/SplitNavigator/MainAnimatedIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,7 @@ function MainAnimatedIconInner({
const smallCircleRadius = (cx + 1) / 2;
const smallCircleRadiusWithStroke = smallCircleRadius - STROKE_SIZE / 2;
const { colorParts: bgColorParts } = useColorParts(ColorVariants.BackgroundAccent);
const { colorParts: borderColorParts } = useColorParts(
ColorVariants.BackgroundTertiaryInverted,
);
const { colorParts: borderColorParts } = useColorParts(ColorVariants.BackgroundTertiary);
const circle2Props = useAnimatedProps(() => {
return {
r: interpolate(
Expand Down
2 changes: 1 addition & 1 deletion kit/controls/src/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ const ButtonForward = React.forwardRef<TouchableWithoutFeedback, ButtonProps>(
<View style={Platform.OS === 'web' ? styles.content : null}>
{loading ? (
<UIIndicator
color={ColorVariants.LineNeutral}
color={ColorVariants.BackgroundInverted}
size={UIConstant.loaderSize}
/>
) : (
Expand Down
2 changes: 1 addition & 1 deletion kit/controls/src/Button/useButtonChildren.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ export function ButtonIcon({

export function ButtonTitle({
children,
titleColor = UILabelColors.TextPrimaryInverted,
titleColor = UILabelColors.TextInverted,
titleRole = UILabelRoles.Action,
titleAnimStyle,
numberOfLines = 1,
Expand Down
Loading